0

指定した要素をクリックすると、指定したリストが非表示になり、もう一度クリックすると表示に切り替わります。

HTML:

    <ul class="acc" id="acc">
            <li>
                    <h3 class="slide">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view">

                    <ul>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                    </ul>
            </div>
            </div>
            </li>

            <li>
                    <h3 class="slide2">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view2">

                    <ul>

                   <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

</ul>
            </div>
            </div>
            </li>
    </ul>

次のコードを使用して、両方のリストでこれを達成しました。

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view').fadeIn('slow'); 
            return false; 
    }); 
    $('h3.slide2').toggle(function() { 
    $('div.view2').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view2').fadeIn('slow'); 
            return false; 
    }); 
});

これに関する私の問題は、それが「動的」ではないことであり、将来別のリストを追加する場合は、上記のコードも必要になります。1 つの小さなコードを使用して、クリック可能な要素と表示/非表示要素に同じ 2 つのクラス名を再利用できるようにしたいと考えています。次のコードでこれを達成しようとしましたが、正しく動作させることができません:

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $(this).siblings('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $(this).siblings('div.view').fadeIn('slow'); 
            return false; 
    }); 
});

任意のヒント？

4

3 に答える 3

0

努力に感謝しますが、.slideToggleを使用してこれを解決することができました：http：//api.jquery.com/slideToggle/

于 2012-06-26T09:45:40.830 に答える
0

DOM が最初にロードされた後にロードする必要がある要素にイベントを適用するには、jQuery on() 関数を試してください。何かのようなもの：

$(function(){
  $('h3.slide').on('toggle', function() { 
    $('div.view').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view').fadeIn('slow'); 
      return false; 
  }); 
  $('h3.slide2').on('toggle', function() { 
    $('div.view2').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view2').fadeIn('slow'); 
      return false;
  }); 
});

それが役立つことを願っています。

参照: http://api.jquery.com/on/

于 2012-06-25T15:53:30.860 に答える
0

ここでは、兄弟の代わりに「最も近い」jquery を使用できます。http://api.jquery.com/closest/

例えば：

$(this).closest('div.view').fadeOut('slow');

これがニーズに合わない場合は、CSS を投稿してください。より適切なサポートを提供できます。

于 2012-06-25T15:54:05.460 に答える