Question

我正在尝试开发一个可折叠菜单，因此当用户点击某个选项时，会显示相关内容，如果再点击它，则只会“关闭它”。我已经尝试过.closest（）或.next（）但它们似乎无法工作，我在元素中添加了类，以便知道哪一个已经被选中或扩展，哪些没有。这是我得到的，任何帮助将不胜感激，谢谢

<ul id="menu">
                <li  class="menu_item"><a  href="content.html">Dosing Options</a> <a href="/index.html" class="home"></a></li>
                <div class="data selected"><!--#include virtual="includes/landing_pages/dosing.html" --></div>
                <li  class="menu_item"><a href="content.html">Efficacy Data</a></li>
                <div class="data"><!--#include virtual="/includes/landing_pages/efficacy.html" --></div>
                <li  class="menu_item"><a href="content.html">Stability</a></li>
                <div class="data"><!--#include virtual="/includeslanding_pages/stability.html" --></div>
            </ul>

Jquery的：

if(!($(this).children("div:first").hasClass("selected"))){
    $(this).addClass("active");
    $(this).parent().addClass("selected");
    $(this).parent().children(".data:first").slideDown("fast");
}else{
    $(this).removeClass("active");
    $(".menu_item.selected").next("div").slideUp("fast");
    $(this).parent().removeClass("selected");


}

Answer 1

无需复杂化，只需使用jQuery的切换方法：

DEMO：http://jsfiddle.net/CMzuv/1/

$('li a').click(function(e) {
    $(this).parent().next().slideToggle();
    e.preventDefault();
});

jquery：在li元素下找到div

1 个答案: