下拉菜單上點擊jquery

我一直在與this thread。但我沒有代表問他們這個問題。下拉菜單上點擊jquery

我有這樣的設置在一個WordPress安裝使用WordPress的吐出來的是默認的菜單層級，就像這樣：

HTML：

<div class="menu-featured-categories-container"> 
<ul id="menu-featured-categories"> 
    <li class="menu-item-has-children"> 
     <a href="#">Featured Categories</a> 
     <ul class="sub-menu"> 
      <li>...</li> 
      <li>...</li> 
      <li>...</li> 
     </ul> 
    </li> 
</ul> 
</div>

CSS：

#menu-featured-categories ul.sub-menu { 
    display: none; 
} 

#menu-featured-categories ul.visible { 
    display: block; 
}

jQuery：

$(document).ready(function() { 
    $('.menu-item-has-children').click(function() { 
     $('.sub-menu').toggleClass('visible'); 
    }); 
});

這只是不適合我。所以我的問題是：我做錯了什麼？任何想法將不勝感激。謝謝。

來源

2015-10-13 KL Piazza

只是一個想法 - 你嘗試過使用'.on（'click'，function（）{...}）;'而不是？我知道'.click（）'可能會遇到動態插入元素的問題，儘管這可能不是您所看到的問題。 – joshfarrant

您的代碼可以工作，請參閱** [小提琴]（https://jsfiddle.net/n0x5xssk/43/）**。 –

謝謝。穆罕默德Alsaedi答案工作。顯然與Wordpress如何處理jQuery有關。見下文。 –

在許多情況下，您需要使用noConflict模式在Wordpress中編寫jQuery。或者，您可以在所有實例中使用「jQuery」而不是$。

因此，這裏是你的選擇，無論是更換包裝

$(document).ready(function(){ 
});

與

jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
});

你的第二個選擇是重寫代碼如下：

jQuery(document).ready(function() { 
    jQuery('.menu-item-has-children').click(function() { 
     jQuery('.sub-menu').toggleClass('visible'); 
    }); 
});

無論是哪種應該解決你的問題，考慮到代碼的作品，它似乎基於Zakari做的a的Fiddle的評論。

乾杯！

來源

2015-10-13 21:25:59

令人驚歎。完美工作。謝謝。 –

下拉菜單上點擊jquery

回答

相關問題