0

我使用以下 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>
4

3 回答 3

0

如果您希望为此使用 jqueryUi，则有一个手风琴控件正是您所描述的场景。手风琴控件具有与其行为相关的各种选项。您可以在 jqueryUi 站点查看手风琴。它很容易实现。另一件事..如果您不想使用另一个库...也可以使用 js 轻松完成。在此处粘贴您的 html，这将很有帮助。

于 2013-09-16T17:29:03.933 回答
0

从第一句话来看。我假设 li 是标题的下一个元素。因此，与其对所有的 li 进行 slideToggle，不如更具体地确定要上滑和下滑的那些。

<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 因为它没有打开。

于 2013-09-16T17:32:02.530 回答
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 回答