0

リスト内の要素を表示/非表示にするために使用している次のコードがあります。

私が抱えている問題は、それがうまくロードされ、うまく開いたり折りたたまれたりすることです。ただし、一度開閉した後は、最後のダウン画像にとどまります。折りたたまれている場合は下向き矢印、展開されている場合は上向き矢印を常に表示する必要があります。

助けていただければ幸いです...ありがとう

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var $divView = $('div.view');
    var innerHeight = $divView.removeClass('view').height();
    $divView.addClass('view');      
    $('div.slide').click(function() {

        // Update the HTML in this element
        var slideHtml = $(this).html();

        // Switch between show/hide
        if (slideHtml.localeCompare('Hide / Show <img src="images/arrow_up.png" />') < 0)
           $(this).html('Hide / Show <img src="images/arrow_up.png" />');
        else
           $(this).html('Hide / Show <img src="images/arrow_down.png" />');
        $('div.view').animate({
          height: (($divView.height() == 90)? innerHeight  : "90px")
        }, 500);
        return false;
    });
});
</script>
<div class="view">
   <ul>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
   </ul>
</div>
<div class="slide">Hide / Show <img src="images/arrow_down.png" /></div>

編集::

上記のコードが Chrome でうまく機能することに気付きました。私の問題は、Firefox で動作しないことです。

展開後は問題ありません（上向きの矢印があります）。折りたたんだ後、上向き矢印はそのまま残り、下向き矢印に置き換わりません。

ヒント/ヘルプをいただければ幸いです。

4

2 に答える 2

0

多くの詳細を提供しないため、これがあなたが望むものかどうかはまったくわかりません。ただし、このコードは使用できます。基本的に、非表示/表示 (または画像) をクリックすると、ビュー div が表示されます。もう一度クリックすると非表示になります。スパムクリックすると、このスクリプトが機能しないことに注意してください。

<style>
    #hs{ cursor: pointer; }
    #down_arrow{ display: none; }
    #view{display: none};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {

    $("#hs").toggle(
        function(){
            $("#up_arrow").hide();$("#down_arrow").show("slow");
            $("#view").show("fast");
        },
        function(){
            $("#down_arrow").hide();$("#up_arrow").show("slow");
            $("#view").hide("slow");
        }
    );


});


</script>
<div id="hs"> 
    Hide / Show
    <span id='up_arrow'><img src="images/arrow_up.png" /></span>
    <span id='down_arrow'><img src="images/down_up.png" /></span>
</div>

<div id="view">
   <ul>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
   </ul>
</div>
于 2012-01-28T16:09:18.120 に答える
0

jQuery のトグル機能を使わないのはなぜですか?

http://api.jquery.com/toggle/

http://api.jquery.com/slideToggle/

次のことができる localCompare を使用しないでください。

  • トグル機能を使う
  • ブール値を使用する
于 2012-01-28T15:55:35.360 に答える