0

我有一个包含三个过滤级别的过滤器菜单，我想设置如下：

单击第一级的一个选项 > 第二级滑出 单击第二级的一个选项 > 选项三滑出

我目前遇到的问题是一个级别中的所有项目都是 onClick 事件的“触发器”......并且更改级别选项会导致下一个级别菜单滑回我需要它坐一次的位置它出来了。

在这里查看：http: //jsfiddle.net/RevConcept/JW5Mm/1/

这是我的代码（注意，onClick 事件现在仅设置为第一级触发第二级）...

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'); 
});
4

1 回答 1

0

您将需要回调中的一个变量来确定它是否被调用，如果它已经被调用过一次，则返回。

于 2012-12-04T19:56:50.073 回答