Question

我隐藏了2个div，我想让它在同一时间只显示其中一个。

例如，如果我先点击它 - 它会显示出来。然后我点击第二个，然后第一个隐藏，只显示第二个div。

<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>

<br><br>

<div id="showmenu2">Click Here</div>
<div class="menu2" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>

    $(document).ready(function() {
        $('#showmenu').click(function() {
                $('.menu').toggle("slide");
        });
    });

    $(document).ready(function() {
        $('#showmenu2').click(function() {
                $('.menu2').toggle("slide");
        });
    });

http://jsfiddle.net/APA2S/3337/

Answer 1

试试这个，

$(document).ready(function() {

    $('#showmenu').click(function() {
        $('.menu').slideDown();
        $('.menu2').slideUp();
    });

    $('#showmenu2').click(function() {
        $('.menu2').slideDown();
        $('.menu').slideUp();
    });

});

Answer 2

使用此：

$(document).ready(function() {
    $('#showmenu').click(function() {
        $('.menu').toggle("slide");
        $('.menu2').hide("slide");//hide the menu2 when the menu is clicked
    });

    $('#showmenu2').click(function() {
        $('.menu2').toggle("slide");
        $('.menu').hide("slide");//hide the menu when the menu2 is clicked
    });
});

JSFIDDLE：http://jsfiddle.net/ghorg12110/APA2S/3338/

Answer 3

在这里，试试这个：

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu, .menu2').stop().slideUp();
            $('.menu').stop().toggle("slideDown");
    });

    $('#showmenu2').click(function() {
            $('.menu, .menu2').stop().slideUp();
            $('.menu2').stop().toggle("slideDown");
    });
});

避免重复$（文件）.ready，我也修复了你的动画......

小提琴：http://jsfiddle.net/APA2S/3344/

Answer 4

请替换以下脚本：

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').toggle("slide");
            $('.menu2').hide("slide");
    });
});

$(document).ready(function() {
    $('#showmenu2').click(function() {
            $('.menu2').toggle("slide");
            $('.menu').hide("slide");
    });
});

Answer 5

$(document).ready(function() {
    $('#showmenu').click(function() {
        $('.hidden').hide();
            $('.menu').toggle("slide");
    });
});

$(document).ready(function() {
    $('#showmenu2').click(function() {
        $('.hidden').hide();
        $('.menu2').toggle("slide");
    });
});

Demo 别忘了在菜单中添加隐藏的课程如果你有两个以上的菜单，你可以使用该代码

Answer 6

你可以试试这个：只需使用hide()你就可以得到它。

$(document).ready(function() {
    $('#showmenu2').click(function() {
                  $('.menu').hide();
                $('.menu2').toggle("slide");

        });

            $('#showmenu').click(function() {
                  $('.menu2').hide();
                $('.menu').toggle("slide");

        });
});

只显示一个隐藏的div

6 个答案: