Question

我的菜单中一切正常只有一个问题当我点击.dropdown-toggle时，它必须只显示closest ul，但在我的代码中每次显示和隐藏的同时我的意思是，当我点击.dropdown-toggle时，我只想显示next ul类dropdown-menu来显示。

的Javascript

$(document).ready(function(){
$('.dropdown-toggle').click(function(){
    $(this).closest('ul').find('.dropdown-menu').addClass("open");
    $(this).addClass("active");
    setTimeout(function(){ 
        if ($(".dropdown-menu").hasClass("open")) {
            $('.dropdown-menu').slideDown('fast');
        }
    }, 300 );
});
$('.has-sub').mouseenter(function(){
    $(this).find('.sub-menu').show('slide', {direction: 'left'}, 200);
    $(this).addClass("active");
    setTimeout(function(){ 
        if ($(".has-sub").hasClass("open")) {
            $('.sub-menu').slideDown('fast');
        }
    }, 300 );
});
$('.has-sub').mouseleave(function(){
    $(this).find('.sub-menu').hide('slide', {direction: 'right'}, 500);
    $(this).removeClass("active");
    setTimeout(function(){ 
        if ($(".has-sub").hasClass("open")) {
            $('.sub-menu').slideDown('fast');
        }
    }, 300 );
});

$(".dropdown-menu").mouseleave(function () {
    $(".dropdown-toggle").removeClass("active");
    setTimeout(function(){ 
        if ($(".dropdown-menu").hasClass("open")) { 
            $('.dropdown-menu').slideUp('fast');
        }
        $('.dropdown-menu').removeClass("open");
    }, 600);
});

}）;

HTML

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="ar-aa">
    <title>alphazone</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/alphazone.js"></script>
</head>
<body>
    <div class="top_border top_bar">
        <div class="container_top_border">
            <a class="brand" href="#" title="Preview Alphazone" target="_blank">Alphazone<i class="icon-out"></i></a>
            <div class="navbar">
                <ul class="menu">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">المشتركين <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <div class="top_caret"></div>
                            <li class="has-sub"><a class="menu-customers dropdown-toggle" href="index.php?option=customers">الزبائن <b class="right_caret"></b></a>
                                <ul class="sub-menu">
                                    <div class="left_caret"></div>
                                    <li><a class="menu-add-new-customer" href="index.php?option=customers&action=add_new">إضافة زبون</a></li>
                                </ul>
                            </li>
                            <li class="divider"><span></span></li>
                            <li class="has-sub"><a class="menu-users dropdown-toggle" href="index.php?option=users">الأعضاء <b class="right_caret"></b></a>
                                <ul class="sub-menu">
                                    <div class="left_caret"></div>
                                    <li><a class="menu-add-new-user" href="index.php?option=users&action=add_new">إضافة عضو</a></li>
                                </ul>
                            </li>
                            <li class="divider"><span></span></li>
                            <li class="has-sub"><a class="menu-users-group dropdown-toggle" href="index.php?option=users_group">مجموعات الأعضاء <b class="right_caret"></b></a>
                                <ul class="sub-menu">
                                    <div class="left_caret"></div>
                                    <li><a class="menu-add-new-customer" href="index.php?option=users_group&action=add_new">إضافة مجموعة جديدة</a></li>
                                </ul>
                            </li>
                            <li class="divider"><span></span></li>
                            <li><a class="menu-users-access" href="index.php?option=users_access">الصلاحيات</a></li>
                            <li class="divider"><span></span></li>
                            <li><a class="menu-mailing-list" href="index.php?option=mailing_list">النشرة البريدية</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">المنتجات <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <div class="top_caret"></div>
                            <li class="has-sub"><a class="menu-categories dropdown-toggle" href="index.php?option=categories">الأقسـام <b class="right_caret"></b></a>
                                <ul class="sub-menu">
                                    <div class="left_caret"></div>
                                    <li><a class="menu-add-new-category" href="index.php?option=categories&action=add_new">إضافة قسم جديد</a></li>
                                </ul>
                            </li>
                            <li class="divider"><span></span></li>
                            <li class="has-sub"><a class="menu-products dropdown-toggle" href="index.php?option=products">المنتجات <b class="right_caret"></b></a>
                                <ul class="sub-menu">
                                    <div class="left_caret"></div>
                                    <li><a class="menu-add-new-product" href="index.php?option=products&action=add_new">إضافة منتج جديد</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

问题在于您的选择器$(".dropdown-menu")它选择了所有带有dropdown-menu类的元素，根据您的需要，选择点击的dropdown-menu元素旁边的dropdown-toggle

注意：此案例还有其他选择器

$('.dropdown-toggle').click(function(){
    $(this).closest('ul').find('.dropdown-menu').addClass("open");
    var that = $(this).addClass("active");
    setTimeout(function(){ 
        var menu = that.next(".dropdown-menu")
        if (menu .hasClass("open")) {
            menu .slideDown('fast');
        }
    }, 300 );
});

Answer 2

.closest表示最接近的父元素，而非最近的兄弟元素。

使用$(this).closest('ul')您引用<ul class="menu">。因此，$(this).closest('ul').find('.dropdown-menu')会找到.dropdown-menu内的所有.menu，因此当您点击.dropdown-toggle时，所有这些都会显示出来。

更改

$(this).closest('ul').find('.dropdown-menu').addClass("open");

到

$(this).closest('.dropdown').find('.dropdown-menu').addClass("open");

你也可以

$(this).siblings('.dropdown-menu').addClass("open");

但这不是未来的证据。

如何在jQuery菜单中只显示一个下拉列表？

2 个答案: