0

次のjquery関数で多くの成功を収めました。タイトルがクリックされるまでコンテンツを非表示にすることができ、その後 ul アイテムが展開されます。私はこの機能が気に入っていますが、一度に 1 つの ul しか開いてほしくないのです。タイトルをクリックすると、そのタイトルが展開され、開いている残りのすべてが折りたたまれるようにするにはどうすればよいですか?

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(function() {
            // Slide
            $('#expandable_menu > ul > a.expanded + li').slideToggle('slow');
            $('#expandable_menu > ul > a').click(function() {
                $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> li').slideToggle('slow');
            });

        }, 250);
    });  
</script>

これが伸縮するものの構造です。

<ul id="expandable_menu" class="expandable_menu">

     <ul>
         <a class="expanded">TITLE</a>
     <li class="expandablemenu" ">
          <ul>
                   <li>
                        <div> This is where the content goes </div>
                    </li>
          </ul>
     </li>
      </ul>

     <ul>
         <a class="expanded">TITLE</a>
     <li class="expandablemenu" ">
          <ul>
                   <li>
                        <div> More content! </div>
                    </li>
          </ul>
     </li>
      </ul>

</ul>
4

3 に答える 3

0

あなたがフィドルで更新したのを見ました...私にはあまり時間がありませんが、必要に応じて最初にすべてを非表示にしてから、実際に切り替えたいものを切り替えてください。

$(document).ready(function () {
    setTimeout(function () {
        // Slide
        $('#expandable_menu > ul > a.collapsed + li').slideToggle('slow');
        $('#expandable_menu > ul > a').click(function () {
            // I only added this
            $('#expandable_menu > ul > li').hide('slow');
            $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> li').slideToggle('slow');
        });

    }, 250);
});

フォークおよび更新されたデモ

于 2013-09-17T19:56:45.057 に答える
0

これにjqueryUiを使用したい場合は、説明したシナリオにぴったりのアコーディオンコントロールがあります。アコーディオン コントロールには、その動作に関連するさまざまなオプションがあります。jqueryUiサイトでアコーディオンを見ることができます。実装は非常に簡単です。別のこと..別のライブラリを使用したくない場合... jsを使用しても簡単に実行できます。ここにあなたのhtmlを貼り付けてください、それは役に立ちます。

于 2013-09-16T17:29:03.933 に答える