单击另一个面板时如何关闭所有打开的面板答案

【问题标题】：How to close all open panels when another one is clicked单击另一个面板时如何关闭所有打开的面板
【发布时间】：2013-09-29 15:51:35
【问题描述】：

我在这里运行了一个搜索框：

http://codepen.io/h0rhay/pen/Kgqwt

代码：

$('.findNavL1').click(function () {
    $(this).children('.slideContainer').toggleClass('show').css('z-index', +1);
});

$('.slideContainer').click(function () {
    if ($(this).hasClass('show')) {
        $(this).toggleClass('show');
    }
});

标记：

<div class="row">
    <div class="twelve columns width33">
        <div class="navContainer rel">
             <h2 class="navHeading">Find a holiday</h2>
             <ul class="findHolNav">
                <li class="findNavL1" onClick="return true"> <span>When</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 1</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>How many Days </span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 2</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>Where</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 3</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>Departing</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 4</h2>
                    </div>
                </li>
                <li class="findNavL1" onClick="return true"> <span>No. of People</span>
                    <div class="slideContainer">
                         <h2 class="internalContent">This is some content 5</h2>
                    </div>
                </li>
            </ul>
        </div>

CSS：

.rel {
    position:relative;
}

.staticP {
    position:static !important;
}

.show {
    display:block !important;
}

.hide {
    display:none;
}

/* -----------------------------------------
   Shared Styles
----------------------------------------- */

.width33 {
    width:33.3% !important;
}

.navContainer {
    background:#ccc;
}

.findHolNav {
    list-style-type: none;
    padding:0;
}

.findNavL1{
    cursor:pointer;

}

.findNavL1 span {
    padding:20px;
    display:block;
}

.findNavL1:nth-of-type(odd){
    background-color:#c6c6c6;
}

.findNavL1:hover{
    background-color:#c2c2c2;
}

.findNavL1:hover > .slideContainer, .findNavL1:active > .slideContainer {

}

.slideContainer {
    display:none;
    background-color:lime;
    min-height:100%;
    position:absolute;
    top:0;
    left:100%;
    width:208%;
}

目前，用户界面几乎是正确的。当你点击一个链接时，相应的面板就会打开。

但是，如果您单击另一个链接，其对应的面板会打开，但前一个会保持打开状态。

我希望它关闭。

这将只留下活动的一个打开。

///////////////////////////////

我应该说.. UI 比我之前说的要复杂一些。

第一次点击：幻灯片打开容器。

点击相同的链接：幻灯片关闭

在打开的容器内单击：容器保持打开状态。

（我已经完成了所有这些工作）

如果您点击不同的链接，则打开的容器会关闭并打开新的容器..

这就是我坚持的一点。

【问题讨论】：

把你的代码放在jsfiddle.net，以便我们理解。
@JitendraPancholi codepen 只是另一个 jsfiddle（克隆）
为什么在代码和标记中都有点击处理程序？

标签： javascript jquery toggle

【解决方案1】：

是的！终于到了：

$('.findNavL1').click(function(){
var searchBoxLink = $(this);
var inactiveLink = $('.findNavL1').not(searchBoxLink);

if ( $(inactiveLink).children('.slideContainer').hasClass('show') ){
  $(inactiveLink).children('.slideContainer').removeClass('show');
}

$(searchBoxLink).children('.slideContainer').toggleClass('show');
});


$('.slideContainer').click(function(){
if ( $(this).hasClass('show') ){
 $(this).toggleClass('show');
        }
});

http://codepen.io/h0rhay/pen/Kgqwt

【讨论】：

【解决方案2】：

您可以尝试关注...

$('.findNavL1').click(function(){
    $('.slideContainer').each(function( index ){
        $(this).removeClass('show');
        $(this).addClass('hide');
    });
    $(this).children('.slideContainer').addClass('show');
});

看到这个 js fiddle...example

【讨论】：

谢谢，但同样，当您单击打开它的同一链接时，它不会关闭容器..

【解决方案3】：

使用以下 JS 代替您编写的那个 (codepen)：

$('.findNavL1').click(function(){
  $('.slideContainer').hide();
  $(this).find('.slideContainer').show();
});

【讨论】：

感谢您的代码，但当打开它的链接被点击时，它并没有关闭容器

【解决方案4】：

如下改变你的块：

if ($(this).hasClass('show')){
    $(".slideContainer").removeClass("show");
    $(this).toggleClass('show');
    }
});

【讨论】：