1

filter-name リスト項目の 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

これを試してください -デモ

$("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 に答える
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();
  });
});​

ここでフィドルをチェックしてください。このコンテキスト内でフィルター オプションを見つけて表示し、その兄弟に移動して、その中のリストを非表示にします。

于 2012-07-16T15:42:15.337 に答える
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 に答える