修改菜單使用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);