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

从上面的代码中，菜单是通过“onclick”打开的，但是当我们点击另一个有子菜单的 li 时，它会打开，但前一个 li 并没有像这样关闭：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);