jquery - 尝试在 DIV 单击上展开/折叠 jQuery 菜单

Question

好的，我以前做过，但我的代码不工作，所以我知道我一定做错了什么。当访问者单击包含向上箭头或向下箭头的 CSS 生成图像的 div 时，我试图扩展我的菜单。我不希望在访问者单击主链接时打开子菜单，因为我仍然希望该链接指向某个地方。我无法让我的代码合作。我做错了什么？

css 包含在 jsfiddle 中.

jQuery

$("#b-links div").click(function(){

    //variables
    var mainMenu = $(this).closest("ul");
    var subMenu = $(this).siblings("ul");
    var openArrow = mainMenu.find("div.arrow-open");
    var openMenu = mainMenu.find("ul.open");

    //if this submenu is not currently open

    if (!$(this).is(openArrow)){

    openMenu.removeClass("open").slideUp(); //close open menu
    openArrow.removeClass("arrow-open").addClass("arrow-closed"); // change open arrow
    $(this).removeClass("arrow-closed").addClass("arrow-open"); // change closed arrow
    subMenu.addClass("open").slideDown(); // open this submenu

    } else {

    //if this submenu IS currently open

        openMenu.removeClass("open").slideUp(); close open menu
        openArrow.removeClass("arrow-open").addClass("arrow-closed"); change open arrow
    }
});

HTML

<ul id="b-links">
    <li><a href="#">Main Link</a><div class="arrow-closed"></div>
    <ul>
        <li><a href="#">SubMenu Link</a></li>
        <li><a href="#">SubMenu Link</a></li>
        <li><a href="#">SubMenu Link</a></li>
        </ul></li>
    <li><a href="#">Main Link</a><div class="arrow-closed"></div>
        <ul>
        <li><a href="#">SubMenu Link</a></li>
        <li><a href="#">SubMenu Link</a></li>
        <li><a href="#">SubMenu Link</a></li>
    </ul></li>
    <li><a href="#">Main Link</a><div class="arrow-closed"></div><ul>
        <li><a href="#">SubMenu Link</a></li>
        <li><a href="#">SubMenu Link</a></li>
        <li><a href="#">SubMenu Link</a></li>
    </ul></li>

代码实际上在 jsFiddle 中做了一些事情(错误的事情，但至少是一些事情)。相同的代码在我的实际网页上没有任何作用。我已经检查以确保 jQuery 在我的页面上正常工作(我让一些东西消失了)。

这是我的菜单图片，所以你可以看到我说的箭头

Answer 1

使用 Jquery 可以按如下方式完成

$(document).ready(function(){
    $('#b-links ul').hide();  //  hide all ul elements which belongs to #b-link
    $('a').click(function(){  //  this works on link click. 
        $('#b-links ul').hide(); // hide displayed ul elements
        $(this).siblings().slideDown(); // show required element

    });
});

或点击div

$('#b-links div').click(function(){ 

    if($(this).hasClass('arrow-closed')){ 
        $('#b-links ul').slideUp();
        $('#b-links div').removeClass('arrow-open').addClass('arrow-closed');
        $(this).removeClass('arrow-closed').addClass('arrow-open');
        $(this).siblings().slideDown();
    }else{

        $(this).removeClass('arrow-open').addClass('arrow-closed');
        $('#b-links ul').slideUp();
    } 

});

这就是阻止 jQuery 显示和隐藏元素的原因

#b-links li ul li {
    display: none;
} 
#b-links li ul {
    display: none;
}