Javascript 我的Jquery单击按钮不工作

希望你一切顺利

我想做点像这样的东西

首先，它会显示

然后，点击这个菜单图像，它会显示如下内容

因此，我在这里制作了一些容器：

因此，我尝试使用以下代码：

<script>
    $(document).ready(function(){
    $(".btn1").click(function(){
        $(".menu_pos_jquery2").fadeIn();
    });
    });

    $(document).ready(function(){
    $(".btn1").click(function(){
        $(".menu_pos_jquery2").fadeOut;
    });
    });
</script>

---

但当我运行这个程序时，它不起作用，但它显示了整个页面，就像我给你们提供的第二张图片一样。。我只想显示第一个菜单，在点击菜单之后，它必须显示我的另一个容器，怎么做？请帮忙。。对不起，我的英语不好。。希望你能理解我的问题

您应该将代码更改为：

$(document).ready(function(){
    $(".menu_pos_jquery2").fadeOut();
    $(".btn1").click(function(){
        $(".menu_pos_jquery2").fadeToggle("slow");
    });
});

也许你想要这个

$(document).ready(function(){
    $(".btn1").click(function(){
        $(".menu_pos_jquery").fadeOut("normal",function(){
            $(".menu_pos_jquery2").fadeIn();
        });
    });
});

您已经向同一个元素注册了两个单击事件处理程序，因此每次单击按钮时，都将调用这两个事件处理程序。但一次只能打一个电话

向.btn元素添加和删除类是一个不错的选择，因为您还可以指定CSS w.r.t状态。请考虑以下

$(document).ready(function(){

    $(".btn1").click(function(){

        var isMenuOpen = $(this).hasClass("open");

        if(isMenuOpen){

            //if already open, close it
            $(this).removeClass("open");
            $(".menu_pos_jquery2").fadeOut();
        }else {

            //if not open, open it now
            $(this).addClass("open");
            $(".menu_pos_jquery2").fadeIn();
        }
    });
});

---

谢谢你的回复。。但我想先把我的第二个容器隐藏起来。。现在两个集装箱都满了谢谢。。现在它正在展示。。但另一个问题是，当我单击时，它会成功显示，但现在我再次单击，它会自动隐藏并再次打开..只是为了清楚地表明您希望第二个只打开一次？看看这个是的，我想要这个。。你的小提琴使我明白了。。谢谢你的回答

$(document).ready(function(){

    $(".btn1").click(function(){

        var isMenuOpen = $(this).hasClass("open");

        if(isMenuOpen){

            //if already open, close it
            $(this).removeClass("open");
            $(".menu_pos_jquery2").fadeOut();
        }else {

            //if not open, open it now
            $(this).addClass("open");
            $(".menu_pos_jquery2").fadeIn();
        }
    });
});