1

我试图让以下行为，以便当单击过滤器名称列表项之一时，它会显示其下方的 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();
        });
    });

我在这里先向您的帮助表示感谢！

4

3 回答 3

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();
  });
});​

在这里查看小提琴。它在 this 上下文中找到过滤器选项，显示它们，转到其兄弟姐妹并隐藏其中的列表。

于 2012-07-16T15:42:15.337 回答
1

试试这个 -演示

$("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");
    }
});
于 2012-07-16T15:47:53.470 回答
0

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

这是演示

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>​
于 2012-07-16T15:38:28.813 回答