У меня есть окно поиска:
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%;
}
На данный момент пользовательский интерфейс почти прав. Когда вы нажимаете на ссылку, открывается соответствующая панель.
Однако, если вы нажмете на другую ссылку, откроется соответствующая панель, но предыдущая остается открытой.
Я хочу, чтобы он закрылся.
Который оставил бы только активную открытую.
//////////////////////////////////////
Я должен был сказать.. Пользовательский интерфейс немного сложнее, чем я уже говорил.
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');
}
});
Используйте следующий 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 скрипка... пример