0

私のメニューではすべてが正常に機能します。クリックしたときに 1 つの問題だけ.dropdown-toggleが表示される必要がありますがclosest ul、コードでは常にすべてが表示され、同時に非表示に.dropdown-toggleなります。next uldropdown-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

問題は、セレクター$(".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 に答える
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 に答える