点击下拉导航菜单

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>

当你复制这两次，然后当你点击类上的 4 时，sort-menu，它会放置两个菜单容器，那个类是 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();
     });
});

在代码“click”中，您可以将其更改为“hover”。

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/