Question

如果我想通过点击菜单进行切换效果，这段代码效果很好。你可以在这里看到结果。

$(document).ready(function () {
    var $menu2 = $("#menu-2");
    var $links = $('#menu-menu-1 .menu-item a').click(function () {
        var submenu = $(this).next();
        $subs.not(submenu).hide();
        var isVisible = submenu.stop(true, true).is(':visible');
        $menu2.stop(true, true);
        if (isVisible) {
            submenu.hide(500);
            $menu2.slideUp(300);
        } else {
            $menu2.slideUp(300, function () {
                $menu2.slideDown(300);
                submenu.show(500);
            });
        }
    });
    var $subs = $links.next();
});

我的问题是 .menu-item a ，这样脚本就会执行菜单所有链接的代码（也适用于没有子菜单链接的链接）。但在我的情况下，我只想执行包含子菜单链接的链接。如果我尝试用 .menu＆gt;替换 .menu-item a ul li a 不起作用。

html（由php生成）代码的结构如下：

<ul id="menu-menu-1">
<li class="menu">
    <a>News</a>                                       //first main menu
        <ul class="sub-menu" style="display: none;">  //second grey menu
           <li>
          <a>Mondo</a>
          <a>News Live</a>
          <a>Quotidiani Cartacei</a>

            </li>
</li>
</ul>

相关的css：

.menu {
background-color: #F6F6EE;
border-radius: 1px;
height: 30px;
padding: 10px 10px 0 5px;
width: 100%;
}
.menu li a {
color: #716B6B;
display: block;
float: left;
font-size: 14px;
padding: 2px 17px;
text-decoration: none;
width: 100%;
}
#menu-2 {
background-color: #DCDCD5;
border-radius: 1px;
display: none;
height: 33px;
position: relative;
width: 100%;
z-index: -1;
}

我该如何解决？

Answer 1

如果我正确理解你的问题（只有当选择器有孩子时才执行），那么替换为：

 var $links = $('#menu-menu-1 .menu-item a').click(function (e) {
    if($links.children().length > 0){
        e.preventDefault();
        var submenu = $(this).next();
        $subs.not(submenu).hide();
        var isVisible = submenu.stop(true, true).is(':visible');
        $menu2.stop(true, true);
        if (isVisible) {
           submenu.hide(500);
           $menu2.slideUp(300);
        } else {
            $menu2.slideUp(300, function () {
                $menu2.slideDown(300);
                submenu.show(500);
            });
        }
     }
 });

Answer 2

您需要在函数顶部检查当前链接是否附加了子菜单。检查click回调的前两行：

$(document).ready(function () {
    var $menu2 = $("#menu-2");
    var $links = $('#menu-menu-1 .menu-item a').click(function () {
        var submenu = $(this).next(".sub-menu");
        var hasSubmenu = submenu.length >= 1;

        if(hasSubmenu) {
          handleLinkWithSubmenu.call(this, submenu);
        } else {
          handleLinkWithoutSubmenu.call(this);
        }
    });
    var $subs = $links.next();

    function handleLinkWithSubmenu(submenu) {
        $subs.not(submenu).hide();
        var isVisible = submenu.stop(true, true).is(':visible');
        $menu2.stop(true, true);
        if (isVisible) {
            submenu.hide(500);
            $menu2.slideUp(300);
        } else {
            $menu2.slideUp(300, function () {
                $menu2.slideDown(300);
                submenu.show(500);
            });
        }
    }

    function handleLinkWithoutSubmenu() {
        $subs.hide();
    }
});

Answer 3

我认为这样的东西可以满足您的需求，它更清洁，更紧凑：

<强>更新： http://jsfiddle.net/FZHC8/2/

<head>
    <script src="jquery-1.10.2.min.js"></script>
    <style>
        .menu {
        background-color: #F6F6EE;
        border-radius: 1px;
        height: 30px;
        padding: 10px 10px 0 5px;
        width: 100%;
        }
        a {
        color: #716B6B;
        display: block;
        float: left;
        font-size: 14px;
        padding: 2px 17px;
        width: 100%;
        cursor:pointer;
        }
        #menu-2 {
        background-color: #DCDCD5;
        border-radius: 1px;
        height: 33px;
        position: relative;
        width: 100%;
        z-index: -1;
        }
        li{
        list-style:none;
        }
    </style>
</head>
<body>
    <ul id="menu-menu-1">
        <li class="menu">
            <a>News</a>                                       
            <ul class="sub-menu"> 
                <li>
                    <a>Mondo</a>
                    <a>News Live</a>
                    <a>Quotidiani Cartacei</a>
                </li>
            </ul>
            <a>News1</a>                                       
            <ul class="sub-menu"> 
                <li>
                    <a>Mondo1</a>
                    <a>News Live1</a>
                    <a>Quotidiani Cartacei1</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        (function () {
            $("li > ul").hide();
            $(".menu > a").click(function (e) {
                $(this).parent().children(".sub-menu").slideUp(200);
                $(this).next(".sub-menu").slideDown(200);
            })
        })();
    </script>
</body>

子菜单的Jquery脚本，我该如何解决？

3 个答案: