0

(これが)どのように機能するかを理解する必要があります。私はそれが使用される多くの異なるケースとインスタンスを見てきましたが、異なって使用されています。クラス名を持ついくつかのdivのうち1つだけをターゲットにします。これを正しく機能させることができないようです。Stackoverflowでいくつかの回答を読みましたが、(this)を使用して1つのクラスをターゲットにできないようです。助けてくれてありがとう。

js

<script type="text/javascript">
  jQuery(document).ready(function(){
     jQuery('.expandCollapseMenu').click(function(){
      jQuery(this).parent().find('.menu_product_main_container').slideToggle();
    });
  });
</script>

html

<div class="menu_category_category">
    <h3 class="basic_catolog">Beverages</h3>        
    <div class="toggle_menu">
        <img alt="" style="border: 0px none;" src="/images/icons/collapse_menu_icon_on.png" class="expandCollapseMenu {src: '/images/icons/expand_menu_icon.png'}" />
    </div>
</div>
<div class="menu_product_main_container">
    <p>Menu Item 1</p>
    <p>Menu Item 2</p>
</div>
<div class="menu_category_category">
    <h3 class="basic_catolog">Lunch</h3>
    <div class="toggle_menu">
    <img alt="" style="border: 0px none;" src="/images/icons/collapse_menu_icon_on.png" class="expandCollapseMenu {src: '/images/icons/expand_menu_icon.png'}" />
    </div>
</div>
<div class="menu_product_main_container">
    <p>Lunch Item 1</p>
    <p>Lunch Item 2</p>
</div>
4

2 に答える 2

1

の値はthis、コードが含まれているコンテキストによって異なります。

イベントハンドラー(に渡される関数など)のコンテキストでは、イベントをトリガーした要素(またはイベントターゲット.click()と呼ばれる)を参照します。this

.each()などの反復関数のコンテキストでは、反復thisの現在の要素を参照します。

于 2012-08-13T15:14:02.600 に答える
0

一つ欠けている.parent()

jQuery(this).parent().find('.menu_product_main_container').slideToggle();この行を使用すると、<div class="toggle_menu">

だから解決策はjQuery(this).parent().parent().find('.menu_product_main_container').slideToggle();

編集 :

インデントで問題がよくわかります。解決策は、そのような新しいdivを置くことができます

<div>
  <div class="menu_category_category">
    <h3 class="basic_catolog">Beverages</h3>        
    <div class="toggle_menu">
        <img alt="" style="border: 0px none;" src="/images/icons/collapse_menu_icon_on.png" class="expandCollapseMenu {src: '/images/icons/expand_menu_icon.png'}" />
    </div>
  </div>
  <div class="menu_product_main_container">
    <p>Menu Item 1</p>
    <p>Menu Item 2</p>
   </div>
</div>

DOM を変更しない限り、あなたの問題についてはわかりません。

于 2012-08-13T15:09:17.310 に答える