javascript - jQuery 单击/切换显示/隐藏 div 面板

Question

我尝试使用 jQuery 单击显示和隐藏一些 div。我几乎已经开始工作了，只是我需要一点帮助。

这是我目前得到的:jsfiddle

$(document).ready(function() {
        $('#showmenu1').click(function() {
                $('.menu1').fadeToggle("fast");
                $('.menu2').hide();
                $('.menu3').hide();
                $('#showmenu2').hide();
                $('#showmenu3').hide();
                $(this).toggleClass('close');
        });
        $('#showmenu2').click(function() {
                $('.menu2').fadeToggle("fast");
                $('.menu1').hide();
                $('.menu3').hide();
                $('#showmenu1').hide();
                $('#showmenu3').hide();
                $(this).toggleClass('close');
        });
        $('#showmenu3').click(function() {
                $('.menu3').fadeToggle("fast");
                $('.menu1').hide();
                $('.menu2').hide();
                $('#showmenu1').hide();
                $('#showmenu2').hide();
                $(this).toggleClass('close');
        });
    });

它运行良好，但如果您单击任何“链接 1”、“链接 2”和“链接 3”链接，它会显示正确的显示 div 并隐藏其他 2 个链接(这是正确的)。然后我需要它做的是，如果您随后单击显示隐藏的相同链接面板，但我还需要其他 2 个链接面板重新出现。在他们保持隐藏的那一刻。

谢谢

Answer 1

我是这样做的:

$(document).ready(function() {
    $('#showmenu1').click(function() {
            $('.menu1').fadeToggle("fast");
            $('#showmenu2').toggle();
            $('#showmenu3').toggle();
            $(this).toggleClass('close');
    });
    $('#showmenu2').click(function() {
            $('.menu2').fadeToggle("fast");
            $('#showmenu1').toggle();
            $('#showmenu3').toggle();
            $(this).toggleClass('close');
    });
    $('#showmenu3').click(function() {
            $('.menu3').fadeToggle("fast");
            $('#showmenu1').toggle();
            $('#showmenu2').toggle();
            $(this).toggleClass('close');
    });
});

Here is the JSFiddle demo :)

使用 toggle() 而不是 hide() 并且当其他菜单不涉及时您不必处理它们:)