Javascript 如何在单击其他面板时关闭所有打开的面板

我在这里有一个搜索框：

代码：

标记：

<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>

目前，用户界面几乎是正确的。单击链接时，相应的面板将打开

但是，如果单击另一个链接，其相应的面板将打开，但上一个面板将保持打开状态

我想把它关上

这将只留下激活的一个打开

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

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

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

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

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

（我把这些都做好了）

如果您单击不同的链接，则打开的容器将关闭，新的容器将打开

---

这就是我一直坚持的地方。

按如下方式更改块：

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

---

使用以下JS，而不是您编写的（）：

---

你可以试试下面

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

---

看到这个js小提琴了吗…

是的！到了最后：

$('.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');
        }
});

---

将您的代码放在，以便我们能够理解。@JitendraPancholi codepen只是另一个JSFIDLE（克隆）为什么您在代码和标记中都有单击处理程序？谢谢，但同样，当您单击打开容器的同一链接时，它不会关闭容器。。谢谢您的代码，但是，当打开容器的链接被单击时，它不会关闭容器

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

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

$('.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');
        }
});