带有添加和删除类的下拉菜单jQuery

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