小编cam*_*egg的帖子

使用jQuery切换多个DIV

我有三个信息面板(具有ID的div panel-one,panel-two以及panel-three所有类的div info-panel),我希望在点击链接时滑入和滑出(这些具有ID toggle-one,toggle-two以及toggle-three所有类别toggle).如果其中一个div在单击其中一个链接时显示,我想隐藏可见的div并显示新的div.如果单击div自己的链接,我想切换显示/隐藏.我正在使用以下代码执行此操作:

HTML:

<ul>
    <li><a id="toggle-one" class="toggle">One</a></li>
    <li><a id="toggle-two" class="toggle">Two</a></li>
    <li><a id="toggle-three" class="toggle">Three</a></li>
</ul>

<div id="panel-one" class="info-panel"><!-- content here --></div>
<div id="panel-two" class="info-panel"><!-- content here --></div>
<div id="panel-three" class="info-panel"><!-- content here --></div>
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$("#toggle-one").click(function () {
    if($("#panel-two").is(":visible")) {
        $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } else if($("#panel-three").css("z-index", "9997").is(":visible")) {
        $("#panel-three").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }
    $("#panel-one").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

$("#toggle-two").click(function () { …
Run Code Online (Sandbox Code Playgroud)

jquery toggle

2
推荐指数
1
解决办法
2万
查看次数

标签 统计

jquery ×1

toggle ×1