Question

我有一个过滤器菜单，其中包含三个级别的过滤，我想这样设置：

点击第一级的选项＆gt;二级滑出点击第二级的选项＆gt;选项三滑出

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

在此处查看：http://jsfiddle.net/RevConcept/JW5Mm/1/

这是我的代码（请注意，onClick事件仅针对第一级触发级别2设置）...

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

Answer 1

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

强制两个Onclick触发器仅触发一次事件

1 个答案: