ここで検索ボックスを実行しています。
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 はほぼ正しいです。リンクをクリックすると、対応するパネルが開きます。
ただし、別のリンクをクリックすると、対応するパネルが開きますが、前のパネルは開いたままです。
閉めてほしい。
これは、アクティブなものだけを開いたままにします。
////////////////////////////////////
私は言うべきだった.. UI はおそらく私が前に言ったよりも少し複雑です。
1 回目のクリック: コンテナをスライドして開きます。
同じリンクをクリックしてください: スライドを閉じる
開いたコンテナ内をクリック: コンテナは開いたままです。
(私はこれですべて正常に動作しています)
別のリンクをクリックすると、コンテナが閉じて新しいコンテナが開きます。
それは私が立ち往生しているビットです。