点击下拉导航菜单

Question

我正在制作一个列表，其中包含一些下拉菜单，我需要使用Jquery进行下拉菜单才能使其正常工作。

我找到了一些Jquery，但问题是当你有两个带ul和li的菜单时，就像这样。 HTML：

<ul class="list-menu">
<li class="sort-menu">4</li>
    <div class="sort-list-dropdown">
         <ul class="sort-list">
             <li>4</li>
         </ul>
    </div>
</ul>

当你复制这两次然后当你单击sort-menu类的4时，它会放置两个菜单容器，那个类是sort-list-dropdown我一直在玩JS我从某个地方来的，我对这个问题感到困惑。

JavaScript的：

    $("ul.list-menu > li").click(function () {
    var X = $(this).attr('id');
    if (X == 1) {
        $("ul.sort-list > li").hide();
        $(this).attr('id', '0');
    } else {
        $("ul.sort-list > li").show();
        $(this).attr('id', '1');
    }
});

//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
    return false;
});

//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
    return false;
});


//Document Click
$(document).mouseup(function () {
    $("ul.sort-list > li").hide();
    $("ul.list-menu > li").attr('id', '');
});

我得到了一些变量，但我不认为这是代码。我想我需要输入一个新变量，但我不知道它需要什么。

如果有人知道如何做到这一点，那么请回复我。

Answer 1

我对这个问题有一个答案。请尝试以下代码：

$(document).ready(function() {
     $('.sort-list-dropdown').hide();
     $('ul.list-menu li').click(function() {
            $(this).next('.sort-list-dropdown').toggle();
     });
});

在代码“点击”中，您可以将其更改为“悬停”。

Answer 2

尝试这样的事情：

http://jsfiddle.net/SinisterSystems/bmwBr/5/

<强> HTML：

<ul>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>

        <li class="sec">Heading Two</li>
        <li><ul>
            <li>Third</li>
            <li>Third</li>
            <li>Third</li>
        </ul></li>

    </ul></li>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
    </ul></li>

</ul>

<强> JS：

$(function(){
    $('li.sec').on('click', function() {
        $(this).next('li').slideToggle();
    });
});

<强> CSS：

ul li {
    list-style:none;
}
.sec {
    background:#efefef;
    padding:25px;
    font-size:24px;
}

尝试这样的事情：

http://jsfiddle.net/SinisterSystems/bmwBr/5/