javascript - jQueryでクラス名を持つ要素を選択する

Question

jQuery に小さな問題があり、何が問題なのか本当にわかりません。私は最近、似たようなことをしました。

onClick イベントを作成しようとしています。div をクリックすると、div 'mobileAccordian' がスライドします。

ここに私のHTMLがあります：

   <ul id="left_nav">
    <li>
            <div class="shop_filter">
                    <span>Shop by Department</span>
            </div>
    </li>
    <div class="mobileAccordian">
        <li>
            Item one
        </li>

        <li>
            Item two
        </li>

    </div>
</ul>

私の目標は、div.shop_filter をクリックできるようにすることです。クリックすると、「mobileAccordian」div が slideToggle メソッドを実行します。「mobileAccordian」を見つけるために実行しているJqueryメソッドがそれを見つけることができないと仮定しています。

これが私のjQueryです。アラートボックスを追加しようとしたので、クリック機能が実行されていることがわかりました。

jQuery("#left_nav li:first-child").click(function(){

   jQuery(this).next().find('.mobileAccordian').slideToggle(1000);

});

どんな助けでも大歓迎です。メソッドの違いについて頭を悩ませようとしています。次()、親()、検索()。

ありがとう。

Answer 1

JSフィドル

マークアップオタクの場合... li 内で span を使用し、それを display:block としてスタイルします。今すぐあなたのコードをこのように

<div><ul id="left_nav">
    <li>
            <span class="shop_filter" data-accord="mobileAccordian" style="display:block;">
                    <span>Shop by Department</span>
            </span>
    </li>
</ul>
    <div class="mobileAccordian">
        <li>
            Item one
        </li>

        <li>
            Item two
        </li>

    </div>
</div>

スクリプトはこのようになります

jQuery("#left_nav li:first-child").click(function(){ 
   var openAccord = jQuery(this).children('span').attr('data-accord');
   jQuery("."+openAccord).slideToggle(1000); //it will slide all accordians having class mobileAccordian
});

Answer 2

適切な domElement が見つからない

だから多分あなたは試してみるべきです：

jQuery("#left_nav li:first-child").click(function(){

   jQuery(this).next('div.mobileAccordian').slideToggle(1000);

});

Answer 3

こちらhttp://jsfiddle.net/6ZbVT/1/

HTML マークアップ

<ul id="left_nav">
 <li>
   <a href="#" class="shop_filter" >Shop by Department</span>
 </li>
 <li class="mobileAccordian" >
   Item one
 </li>
 <li class="mobileAccordian">
   Item two
 </li>
</ul>

JS

jQuery( document ).ready( function() {
  jQuery('body').on('click', '.shop_filter', function(e){
    e.preventDefault();
    jQuery(this).parents().eq(1).find('.mobileAccordian').slideToggle(1000);
  });
});

CSS

 .mobileAccordian { display: none; }