0

在我的菜单中一切正常，只有一个问题，当我点击它时，.dropdown-toggle它必须只显示closest ul，但在我的代码中，每次都同时显示和隐藏我的意思是当我点击时，.dropdown-toggle我只想显示next ulwith 类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>
4

2 回答 2

0

.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");

但这不是未来的证据。

于 2013-07-15T05:45:37.873 回答
0

问题是您的选择器$(".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 );
});
于 2013-07-15T04:28:58.210 回答