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/

我希望这应该像手风琴一样工作，就像当我点击一个子菜单时它会打开它的孩子但是当我点击另一个子菜单时，该菜单的孩子应该打开，其他子菜单将关闭。 / p>

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);

修改菜单以使用onclick事件

1 个答案: