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;
}

尝试在DIV上展开/拼接jQuery菜单，点击

1 个答案: