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

因此，我尝试创建一个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

--编辑--

使用

change

事件绑定它，而不是单击

事件

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

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

这是一把小提琴：

希望有帮助
 你能发布与此相关的HTML吗？嗯，我没想到toggleClass。谢谢工作就像一个符咒：）
$(".menuDrop").change(function(){
            $(".nav").slideDown("slow");
            $(".menuDrop").addClass("btn-hover");
            $(".menuDrop").click(function(){
                $(".nav").slideUp("slow");
                $(".menuDrop").removeClass("btn-hover");
            });
        });

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