Question

希望你好，

我试图制作这样的东西，

首先，它会显示this

之后，点击此＆＃34;菜单＆＃34;图片，它会显示this

之类的内容

所以，我在这里使用<div>制作了一些容器：

<body>

    //this is my menu container..
    <div class="menu_pos_jquery">
        <a class="btn1" href="#"><img src="logo/menu_logo.png" style="height: 70px; margin-left: 850px; margin-top: 15px;" onmousedown="return false;" alt="Menu" /></a>
    </div>

    //here is my another container which i would like to open using Jquery after click menu container.. 
    <div class="menu_pos_jquery2">

    </div>
</body>

所以我尝试使用此代码：

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

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

但是它没有工作，当我运行这个程序，但它显示完整的页面，就像我提供给你第二张图片..我想只显示第一个菜单和点击菜单之后，它必须假设显示我的另一个容器，该怎么办？请帮忙..抱歉我的英语不好!! ..希望你理解我的问题。

Answer 1

您应该将代码更改为：

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

Answer 2

也许你想要这个

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

Answer 3

您已向同一元素注册了两个click事件处理程序，因此，当您单击该按钮时，两者都将被调用。但是一次只能调用一个。

向.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();
        }
    });
});

我的Jquery点击按钮不起作用

3 个答案: