次のように設定したい3つのレベルのフィルタリングを含むフィルターメニューがあります。
レベル1のオプションをクリック>レベル2のスライドアウトレベル2のオプションをクリック>オプション3のスライドアウト
私が現在抱えている問題は、レベル内のすべてのアイテムがonClickイベントの「トリガー」であるということです...そして、レベルオプションを変更すると、次のレベルのメニューがスライドして、一度座っておく必要がある場所に戻ります。出ています。
ここでそれを見る:http://jsfiddle.net/RevConcept/JW5Mm/1/
これが私のコードです(onClickイベントは現在レベル2をトリガーするレベル1に対してのみ設定されていることに注意してください)...
HTML
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group " data-filter-group="location">
<li class="hidden"><a href="#filter-location-any" data-filter-value="" class="selected">any</a>
<li><a href="#filter-location-exterior" data-filter-value=".exterior" class="trigger">exterior</a>
<li><a href="#filter-location-interior" data-filter-value=".interior" class="trigger">interior</a>
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group toggle" data-filter-group="illumination">
<li class="hidden"><a href="#filter-illumination-any" data-filter-value="" class="selected">any</a>
<li><a href="#filter-illumination-illuminated" data-filter-value=".illuminated">illuminated</a>
<li><a href="#filter-illumination-non-illuminated" data-filter-value=".non-illuminated">non-illuminated</a>
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group " data-filter-group="mount">
<li class="hidden"><a href="#filter-mount-any" data-filter-value="" class="selected">any</a>
<li><a href="#filter-mount-wall" data-filter-value=".wall">wall</a>
<li><a href="#filter-mount-ground" data-filter-value=".ground">ground</a>
</ul>
</div>
</div><!--end options-->
CSS
header nav ul.toggle {
display:none;
}
JavaScript
$(".trigger").one('click', function(){
$(".toggle").slideToggle('fast');
});