Question

我使用以下jquery函数取得了很大的成功。它允许您隐藏内容，直到单击标题，然后它展开ul项。我喜欢这个功能，但是我真的很喜欢一次打开一个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>

Answer 1

如果你想使用jqueryUi，有一个手风琴控制，完全符合你所描述的场景。手风琴控制有与其行为相关的各种选项。你可以在jqueryUi网站上看看手风琴。它很容易实现。另一件事..如果你不想使用另一个lib ...也可以使用js轻松完成。在这里粘贴你的HTML，这将是有帮助的。

Answer 2

从第一个陈述判断。我假设li是标题的下一个元素。因此，不要对所有li进行slideToggle，而是要更具体地说明哪些是slideUp和slideDown。

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(function() {
            // Slide
            $('#expandable_menu > ul > a.expanded + li').slideToggle('slow');
        }, 250);
        $('#expandable_menu > ul > a').click(function() {
            if($(this).hasClass("expanded"){
                $(this).next("li").slideUp();
            }
            else{
                $(this).next('li').slideDown() //opening the next li which is the title you wanted
                    .siblings('li').slideUp(); //find all the other li's and slide up
            }
            $(this).toggleClass('expanded').toggleClass('collapsed');
        });
    });  
</script>

添加了元素的代码，以便根据您的请求进行幻灯片重新添加。基本上你需要检查链接是否有类，如果它确实是slideUp因为它已经打开，否则slideDown因为它没有打开。

Answer 3

看到你用小提琴更新了...我没有太多时间，但如果你愿意，你可以先隐藏所有内容，然后继续切换你真正想要切换的那个。

$(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);
});

<强> Forked & Updated Demo

单击以展开，单击时折叠所有其他人

3 个答案: