如何在wordpress中单击时显示下拉菜单？ [英] How do I display drop-down menu on click in wordpress?

问题描述

我希望点击时可以看到子菜单。我正在使用默认的WP导航。



为了检查我需要哪些元素，我检查了源代码，然后在我的代码中使用了相应的类。首先，当你悬停然后它们上升时会显示下拉菜单。这可能意味着脚本的第二部分有效。我究竟做错了什么？任何帮助都会得到很大的帮助！谢谢！



我的尝试：

 $（ document ）。ready（ function （）{
  //  显示隐藏popover  
 $（  .menu-item-623 a）。click（ function （）{
 $（ this ）。find（  #sub-menu ）。slideToggle（  fast）; 
}）; 
}）; 
 $（ document ）。on（ 单击， function （event）{
  var  $ trigger = $（  。menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current- menu-parent menu-item-has-children menu-item-623 first-child）; 
  if （$ trigger！== event.target&&！$ trigger.has（event.target）.length）{
 $（  .sub-menu）。slideUp（  fast）; 
} 
}）; 

 <   ul     id   =  primary-menu    class   = 菜单 >  
 
 <   li     class   = 菜单项菜单 - item-type-custom menu-item-object-custom 
 current-menu-ancestor current-menu-parent menu-item-has-children menu- 
 item-623 first-child >  
 
 <   a     href   = ＃ > 探索<   / a  >  
 
 <   ul    < span class =code-attribute> class   = 子菜单 >  
 
 <   li     id   =  menu-item-563    class   =  menu-item menu-item-type-post_type menu- 
 item-object-page current-menu-item page_item page-item-14 
 current_page_item menu-item-563 first-child &g t;  <   a     href   =  http：// localhost：81 /  > 为什么<   / a  >  <   / li  >  
 <   li     id   =  menu-item-562    class   =  menu-item menu-item-type-post_type menu- 
 item-object-page me nu-item-562 last-child >  <   a     href   =   http：// localhost：81 / DEMO / who-already-joined / > 谁<   / a  >  
 
 <   / li  >  
 <   / ul  >  
 <   / ul  >  

解决方案

（ document ）。REA dy（ function （）{
// 显示隐藏弹出窗口

（ 。 menu-item-623 a）。click（ function （）{

（ this ）。find（ #sub-menu）。 slideToggle（ fast）;
}）;
}）;

I want to make the sub-menus visible on click. I am using the default WP navigation.

In order to check which elements I need, I checked the source code and then used the corresponded classes in my code. First, the drop-downs are displayed when you hover and then they go up. Which probably means that the second part of the script works. What am I doing wrong? Any help will be much apreciated! Thank you!

What I have tried:

$(document).ready(function() {
  // Show hide popover
  $(". menu-item-623 a").click(function() {
    $(this).find("#sub-menu").slideToggle("fast");
  });
});
$(document).on("click", function(event) {
  var $trigger = $(".menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-623 first-child");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".sub-menu").slideUp("fast");
  }
});

<ul id="primary-menu" class="menu">

  <li class="menu-item menu-item-type-custom menu-item-object-custom 
       current-menu-ancestor current-menu-parent menu-item-has-children menu-
        item-623 first-child">

    <a href="#">Explore</a>

    <ul class="sub-menu">

      <li id="menu-item-563" class="menu-item menu-item-type-post_type menu-
       item-object-page current-menu-item page_item page-item-14 
      current_page_item menu-item-563 first-child"><a href="http://localhost:81/">Why </a></li>
      <li id="menu-item-562" class="menu-item menu-item-type-post_type menu-
        item-object-page menu-item-562 last-child"><a href="http://localhost:81/DEMO/who-already-joined/">Who </a>

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

解决方案

(document).ready(function() { // Show hide popover

(". menu-item-623 a").click(function() {

(this).find("#sub-menu").slideToggle("fast"); }); });

这篇关于如何在wordpress中单击时显示下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！