[英]How to close all open panels when another one is clicked
我在這里運行了一個搜索框:
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比我之前說的要復雜一點。
第一次點擊:滑動打開容器。
單擊相同鏈接:幻燈片關閉
單擊打開的容器內:容器保持打開狀態。
(我已經把這一切都搞定了)
如果單擊不同的鏈接,則打開容器關閉並打開新的容器。
多數民眾贊成我堅持下去。
使用以下JS而不是您編寫的JS( codepen ):
$('.findNavL1').click(function(){
$('.slideContainer').hide();
$(this).find('.slideContainer').show();
});
更改你的塊如下:
if ($(this).hasClass('show')){
$(".slideContainer").removeClass("show");
$(this).toggleClass('show');
}
});
你可以嘗試以下......
$('.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');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.