代码之家 › 专栏 › 技术社区 › alexkodr

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

toggle css html jquery javascript

alexkodr · 技术社区 · 9 年前

我试图使用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”和“Link3'链接它显示正确的显示div,并隐藏其他2个链接(这是正确的)。然后我需要它做的是,如果您单击显示隐藏的同一个链接面板,但我也需要其他两个链接面板重新出现。此刻,他们隐藏起来。

谢谢

4 回复 | 直到 9 年前

Ahs N 9 年前

我是这样做的:

$(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() 如果不涉及其他菜单,则不必处理它们:)

andrrs 9 年前

可能切换而不是隐藏其他选项:

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

Rajan Goswami 9 年前

请检查更新的Fiddle: http://jsfiddle.net/rzw9fzz2/2/

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

Spartak Lalaj 9 年前

我修改了一点你的代码。您可能会发现它很有用:

HTML格式:

<div id="showmenu1" class="panel">Link 1</div>
<div id="showmenu2" class="panel">Link 2</div>
<div id="showmenu3" class="panel">Link 3</div>

<div class="menu1">Link 1 reveal content</div> 
<div class="menu2">Link 2 reveal content</div>
<div class="menu3">Link 3 reveal content</div>

CSS:

.panel{width:150px;float:left;padding:50px;cursor:pointer;}
#showmenu1{background:#ffff00;}
#showmenu2{background:#ff0000;}
#showmenu3{background:#fAAA00;}
.menu1, .menu2, .menu3{float:left;background:#000;color:#fff;padding:50px; opacity: 0; display: none}

.hide-showmenu {
  display: none;
}

.display-menu {
  display: block;
}
.transition-menu {
  transition: opacity 0.5s linear;
  opacity: 1;
}

JS文件:

    $(document).ready(function() {
        $('#showmenu1').click(function() {
            $('.menu1').toggleClass("display-menu");
            setTimeout(function() {
                $('.menu1').toggleClass("transition-menu");
            });
            $("#showmenu2, #showmenu3, .menu2, .menu3").toggleClass("hide-showmenu");
            $(this).toggleClass('close');
    });
        $('#showmenu2').click(function() {
            $('.menu2').toggleClass("display-menu");
            setTimeout(function() {
                $('.menu2').toggleClass("transition-menu");
            });
            $("#showmenu1, #showmenu3, .menu1, .menu3").toggleClass("hide-showmenu");
            $(this).toggleClass('close');
    });
        $('#showmenu3').click(function() {
            $('.menu3').toggleClass("display-menu");
            setTimeout(function() {
                $('.menu3').toggleClass("transition-menu");
            });
            $("#showmenu1, #showmenu2, .menu1, .menu2").toggleClass("hide-showmenu");
            $(this).toggleClass('close');
    });
});

在这里摆弄: http://jsfiddle.net/rzw9fzz2/3/