Question

所以我正在尝试创建一个添加和删除类的jquery下拉列表。它确实有效，但只有一次。如果我再次尝试下拉，它只会下降并立即向上滑动。假设在单击按钮后下拉并在再次单击后向上滑动。

$(document).ready(function() {
        //dropdown menu function
        $(".menuDrop").click(function(){
            $(".nav").slideDown("slow");
            $(".menuDrop").addClass("btn-hover");
            $(".menuDrop").click(function(){
                $(".nav").slideUp("slow");
                $(".menuDrop").removeClass("btn-hover");
            });
        });
    });

“btn-hover”类用于在单击按钮后添加与悬停状态相同的css。

- 编辑 -

<div class="menu">
    <div class="col-lg-12">
        <button type="button" class="menuDrop btn btn-default btn-lg">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>

        <ul class="nav">
            <li><a class="link" href="#">home</a></li>
            <hr>
            <li><a href="#">portfolio</a></li>
        </ul>
    </div>
</div>

Answer 1

使用slideToggle和toggleClass可以帮助您实现这一目标，并且代码更少：

//dropdown menu function
$(".menuDrop").click(function(){
    $(".nav").slideToggle("slow");
    $(".menuDrop").toggleClass("btn-hover");
});

这是一个小提琴：http://jsfiddle.net/scesR/

希望有所帮助！

Answer 2

使用 change 事件绑定它，而不是 click 事件。

$(".menuDrop").change(function(){
            $(".nav").slideDown("slow");
            $(".menuDrop").addClass("btn-hover");
            $(".menuDrop").click(function(){
                $(".nav").slideUp("slow");
                $(".menuDrop").removeClass("btn-hover");
            });
        });

下拉菜单jquery添加和删除类

2 个答案: