修改菜单使用onclick事件

Question

我在wordpress网站中使用平面主题。

试图修改菜单功能...花了很多时间在它..但没有运气。

我只是试图修改菜单的方式，它提供的功能，“ontouchstart”事件我想修改它“onclick”事件。就像当我们将菜单项悬停时，如果有子菜单，子菜单就会打开....当我们将其他项目悬停时，第一个项目关闭，并且该项目的子菜单打开，就像手风琴效果一样。我喜欢这个......但我需要这个“onclick”事件。

我已经修改了它的代码，但不能完全得到我想要的。 我的HTML是：

<div class="row row-offcanvas row-offcanvas-left"> 
      <div class="col-lg-3" id="secondary"> 
       <header role="banner" class="site-header" id="masthead"> 

        <button aria-label="Sidebar" data-toggle="offcanvas" class="btn btn-link hidden-lg toggle-sidebar" type="button"><i class="fa fa-gear"></i></button> 
        <button aria-label="Navigation Menu" class="btn btn-link hidden-lg toggle-navigation" type="button"><i class="fa fa-bars"></i></button> 

        <nav role="navigation" class="navigation main-navigation mCustomScrollbar" id="site-navigation"> 

         <ul class="nav-menu" id="menu-primary-menu"> 
          <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-29" id="menu-item-29"><a href="http://localhost/mi6/">Introduction</a></li> 

          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-31" id="menu-item-31"><a href="http://localhost/mi6/index.php/planning/">Planning</a> 
           <i class="fa fa-caret-right open"></i><ul class="sub-menu" style="display: block;"> 
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-34" id="menu-item-34"><a href="http://localhost/mi6/index.php/planning/pm-tools-evaluation/">PM Tools Evaluation-This is addition text is added to test link wrapping on long content</a> 
             <i class="fa fa-caret-right open"></i><ul class="sub-menu" style="display: block;"> 
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35" id="menu-item-35"><a href="http://localhost/mi6/index.php/planning/pm-tools-evaluation/comparative-analysis/">Comparative Analysis</a></li> 
             </ul> 
            </li> 

            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32" id="menu-item-32"><a href="http://localhost/mi6/index.php/planning/crm-tools-evaluation/">CRM tools Evaluation</a> 
             <i class="fa fa-caret-right"></i><ul class="sub-menu"> 
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33" id="menu-item-33"><a href="http://localhost/mi6/index.php/planning/crm-tools-evaluation/comparative-analysis/">Comparative Analysis</a></li> 
             </ul> 
            </li> 

           </ul>        

          </li> 
         </ul> 

        </nav> 


       </header> 

      <div class="sidebar-offcanvas"></div> 

     </div> 



    </div> 

和JS是：

function(a){ 
"use strict"; 
a(document).ready(function(){ 
     a(".toggle-sidebar").click(function(){ 
      a(".row-offcanvas").toggleClass("active") 
     }), 

     a(".toggle-navigation").click(function(){ 
      a(this).toggleClass("open").next("#site-navigation").slideToggle(300) 
     }), 

     a("#site-navigation .sub-menu, #site-navigation .children").before('<i class="fa fa-caret-right"></i>'), 
     "onclick"in window?a("#site-navigation .menu-item-has-children .fa, #site-navigation .page_item_has_children .fa").click(function(){ 
      a(this).toggleClass("open").next("ul").slideToggle(300) 
     }): 

     a("#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children").not(".current-menu-parent, .current_page_parent, .current_page_ancestor, .current-menu-ancestor").hover(function(){ 
      a(this).children(".fa").toggleClass("open").next("ul").stop(!0,!0).delay(200).slideDown() 
     }, 
     function(){ 
      a(this).children(".fa").toggleClass("open").next("ul").stop(!0,!0).delay(500).slideUp() 
     } 
    )} 
    )} 
(jQuery); 

从上面的代码，菜单与“点击”，但是当我们点击另一个立其为具有子菜单打开了，然后将它打开了，但前面的李不打烊这样的小提琴：http://jsfiddle.net/6augy27b/14/

我想这应该是像我一个子菜单上点击它会打开它的孩子手风琴工作，但是当我点击另一个子菜单该菜单的孩子应该打开和其他子菜单将关闭。

Answer 1

你可以请尝试以下它适用于fiddel代码：

(function($){ 
    $(document).ready(function() { 
    $('.toggle-sidebar').click(function() { 
     $('.row-offcanvas').toggleClass('active'); 
    }); 

    $('.toggle-navigation').click(function() { 
     $(this).toggleClass('open').next('#site-navigation').slideToggle(300); 
    }); 

    $('#site-navigation .sub-menu, #site-navigation .children').before('<i class="fa fa-caret-right"></i>'); 

    if(!!('ontouchstart' in window)){ 
     $('#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children') 
     .click(function() { 
     $(this).children("fa").toggleClass('open').next('ul').slideToggle(300); 
     }); 
    } else { 
     $('#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children') 
     .not('.current-menu-parent, .current_page_parent, .current_page_ancestor, .current-menu-ancestor') 
     .click(function() { 
      $('#site-navigation ul.sub-menu').slideUp(); 
      $('#site-navigation .fa').removeClass('open'); 
     $(this).children('.fa').toggleClass('open'); 
     $(this).children('ul').stop(true, true).delay(200).slideToggle(); 

     }); 
    } 
    }); 
})(jQuery);