Question

我正在努力让以下行为，以便当单击其中一个过滤器名称列表项时，它会显示它下面的ul（默认情况下隐藏所有带有.filter-options的ul）并隐藏任何其他ul打开的列表。再次单击同一过滤器名称列表项也会隐藏该ul。如果你点击所有ul（.filter-options）隐藏的任何地方，它也会很棒。

<ul class="all-filters" id="narrow-by-list">
    <li class="filter-name" id="Colour-filter">Colour
        <ul class="filter-options" id="Colour-options-list">
            <li>Black</li>
            <li>Red</li>
            <li>Green</li>
         </ul>
    <li>
    <li class="filter-name" id="Material-filter">Material
        <ul class="filter-options" id="Material-options-list">
            <li>Glass</li>
            <li>Wax</li>
            <li>Resin</li>
        </ul>
    </li>
    <li class="filter-name" id="Size-filter">Material
        <ul class="filter-options" id="Size-options-list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>

这是我当前的jQuery，其中一些有用......

jQuery.noConflict();
        jQuery(document).ready(function(){
        jQuery('#narrow-by-list .filter-name').click(function(event) {
          jQuery('ul.filter-options').not('> ul', this).hide("fast");
          jQuery('ul.filter-options', this).toggle("fast");
          event.stopPropagation();
        });
    });

提前感谢您的帮助！

Answer 1

你有html错误（你打开标签而不是关闭标签，忘了关闭你的ul，这主要是为什么没有工作），这是更正版本：

<ul class="all-filters" id="narrow-by-list">
<li class="filter-name" id="Colour-filter">Colour
    <ul class="filter-options" id="Colour-options-list">
        <li>Black</li>
        <li>Red</li>
        <li>Green</li></ul>
</li>
<li class="filter-name" id="Material-filter">Material
    <ul class="filter-options" id="Material-options-list">
        <li>Glass</li>
        <li>Wax</li>
        <li>Resin</li></ul>
</li>
<li class="filter-name" id="Size-filter">Material
    <ul class="filter-options" id="Size-options-list">
        <li>1</li>
        <li>2</li>
        <li>3</li></ul>
</li>
</ul>

这是有效的js：

jQuery.noConflict();
  jQuery(document).ready(function() {
  jQuery('#narrow-by-list .filter-name').click(function(event) {
    jQuery(this).find('ul.filter-options').toggle("fast").end().siblings().find('ul').hide('fast');
    event.stopPropagation();
  });
});

Check out the fiddle here。它在此上下文中查找过滤器选项，显示它们，转到其兄弟节点并隐藏其中的列表。

Answer 2

试试这个 - DEMO

$("li.filter-name").on("click", function() {
    if ( $("ul", this).is(":visible") ) {
        $("ul", this).slideUp("fast");
    } else {
        $("li.filter-name ul").slideUp("fast");
        $("ul", this).slideDown("fast");
    }
});


$("body").on("click", function(e) {
    if ( !$(e.target).is("li") ) {
        $("li.filter-name ul").slideUp("fast");
    }
});

Answer 3

你有一些html缺少声明，我纠正了它们并改变了你的jQuery方式：

here is demo

jQuery的：

$(document).ready(function(){
    $('.filter-options').slideUp('fast');//hide all filters at the begining
    //you can use fast/slow or time declarations with miliseconds

    $('#narrow-by-list .filter-name').click(function() {
        $('.filter-options').slideUp(500);//hide all filters
        $(this).children('.filter-options').slideDown(500);//show clicked ele's filters
        //you can use other animations instead of slideUp/Down, like fadeIn() and fadeOut(), or pure hide() / show()
    });
});

并注意$ === jQuery

HTML：

<ul class="all-filters" id="narrow-by-list">
    <li class="filter-name" id="Colour-filter">Colour
        <ul class="filter-options" id="Colour-options-list">
            <li>Black</li>
            <li>Red</li>
            <li>Green</li>
        </ul>
    <li>
    <li class="filter-name" id="Material-filter">Material
        <ul class="filter-options" id="Material-options-list">
            <li>Glass</li>
            <li>Wax</li>
            <li>Resin</li>
        </ul>
    </li>
    <li class="filter-name" id="Size-filter">Numbers
        <ul class="filter-options" id="Size-options-list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>

jQuery Toggle隐藏所有其他点击页面全部隐藏

3 个答案: