Question

我正在使用.click来显示子菜单。但是当我在菜单上点击子菜单时，即。第二个<li>不会打开。我不知道什么是错的这是我JSfiddle上的代码。

现在，我需要的是：当我点击菜单时，子菜单应该打开，当点击第二个菜单时，它应该打开，但第一个孩子应该消失。

Answer 1

喜欢这个吗？

$(function () {
    //Hide all the sub menus
    $('li ul').hide();

    $("#leftmenuidfrmslt li").has("ul").click(function (e) {
        $("#leftmenuidfrmslt li ul:visible").slideUp("fast");
        $(this).children("ul").slideDown("fast");
    });
});

JSFIDDLE

Answer 2

已更新

请参阅this fiddle。

$('li ul').hide();

$("#leftmenuidfrmslt li").click(function(e) {
    var submenu = $(this).children("ul");    
    if (!$(submenu).is(":visible")) {
        hideSubMenus();
        submenu.slideDown("fast");
    } else {
        submenu.slideUp("fast");
    }
    e.stopPropagation();
});

$('html').click(function() {
    hideSubMenus();
});

Answer 3

您可以尝试这样的事情：

$(function () {    
   $('li ul').hide();

   $("#leftmenuidfrmslt li").has("ul").click(function(e) {
        var submenu = $(this);

        $("#leftmenuidfrmslt li ul:visible").slideUp("fast");

        submenu.children("ul").slideDown("fast");

   });
});

Answer 4

看看This fiddle。使用类来标记事物来表示它们的功能要容易得多，并且可以实现更多可重用的代码。例如：

.menu { /* my menu class */ }
.menu-item { /* a class for items in a menu */ }
.submenu { /* a class marking a submenu */ }

然后，您可以让您的javascript代码对这些类进行操作，而不必使用符合层次结构的复杂代码。

$(document).ready(function () {

    $(".menu > .menu-item").addClass("block-vertical-center");

    //Vertically center any blocks we are supposed to
    $(".block-vertical-center").wrapInner('<span class="table-span"><span class="table-cell-span"></span></span>');

    //Hide all the sub menus to start with
    $(".submenu").hide();

    $("#leftmenu .menu > .menu-item").on("click",function(e) {
        var submenu = $(e.target).find(".submenu");
        var isVisible = submenu.is(":visible");

        //Hide all the sub menus so we don't have multiples open
        $("#leftmenu .submenu").slideUp("fast");
        if (submenu.length > 0){
            if (!isVisible){
                submenu.slideDown("fast");
            }
            e.stopPropagation();
        }
    });
});

此外，对于垂直对齐问题：不要使用行高来垂直对齐块项的内容。如果您的文字转到多行，则会出现问题。相反，你可以定义一个标记类（我经常使用“block-vertical-center”或类似的东西）做这样的事情：

span.table-span {
    padding:0;
    margin:0;
    border:0;
    vertical-align:middle;
    display:inline-table;
    height:100%;
    width:100%;
}

span.table-cell-span {
    padding:0;
    margin:0;
    border:0;
    vertical-align:middle;
    display:table-cell;
    height:100%;
    width:100%;    
}

然后在你的javascript中，你可以这样做：

$(".block-vertical-center").wrapInner('<span class="table-span"><span class="table-cell-span"></span></span>');

然后你只需定义任何内容应该垂直居中的块，即“block-vertical-center”类。这样做，是将块的内容包装在内联表中。 vertical-align属性只能在表格单元格中正常工作，因此我们围绕内容包装一个表格，它将神奇地垂直对齐，而不必担心奇怪的行间距问题。

Answer 5

我已经更新了JS代码，如下所示

$(function() {
    $("li ul").hide();
    var submenu = $("li ul");

    $("#leftmenuidfrmslt li").on("click", function(e){
        if($(this).children("ul").length){
            submenu.slideUp("fast");
            $(this).children("ul").slideDown("fast");
        }
    });
});

希望这有帮助！

单击子菜单不显示

5 个答案: