2

如果我想通过单击菜单来制作切换效果，此代码效果很好。你可以在这里看到结果。

$(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 > ul li a替换.menu-item 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;
}

我该如何解决？

4

3 回答 3

1

我认为这样的东西可以满足你的需要，它更干净、更紧凑：

更新：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>
于 2013-11-12T14:40:05.933 回答
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);
            });
        }
     }
 });
于 2013-11-12T14:12:48.697 回答
1

您需要在功能顶部检查当前链接是否附加了子菜单。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();
    }
});
于 2013-11-12T14:15:23.613 回答