Question

我被我正在工作的网站所困扰。

在某些浏览器上，它会在悬停时打开和关闭子菜单，在其他浏览器上，它会通过单击工作，并在子菜单中的页面上保持打开状态。我想通过点击文本＆amp;强制子菜单导航箭头并删除悬停以完全打开子菜单。有谁知道如何解决这个问题？

代码的某些部分：

CSS

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 16px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 12px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.625;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #3699dc;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}

jquery的

}(jQuery);
;(function($){
    'use strict';
  $(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 .fa, #site-navigation .page_item_has_children .fa')
      .click(function() {
        $(this).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')
      .hover(function() {
        $(this).children('.fa').toggleClass('open').next('ul').stop(true, true).delay(200).slideDown();
      },function() {
        $(this).children('.fa').toggleClass('open').next('ul').stop(true, true).delay(500).slideUp();
      });
    }
  });
})(jQuery);

Answer 1

我认为问题在于您在菜单上使用.hover()。

看看你的代码

if(!!('ontouchstart' in window)){
  // .....
} else {
 $('#some-selectors').not('#some-selectors-2').hover(function(){
    // ...
 },function(){
   // ...
 });
}

将.hover()更改为.click()即可。

if(!!('ontouchstart' in window)){
 // .....
} else {
$('#some-selectors').not('#some-selectors-2').click(function(){
 $(this).children('.fa').toggleClass('open').next('ul').stop(true, true).delay(200).slideToggle();
 }
}

Answer 2

我能够解决这个问题：http://jsfiddle.net/6augy27b/21/

(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() {

        $(this).children('.fa').toggleClass('open');
        $(this).children('ul').stop(true, true).delay(200).slideToggle();

     /* },function() {
        $(this).children('.fa').toggleClass('open')
        $(this).children('ul').hide();
        //stop(true, true).delay(500).slideUp();
        */
      });
    }
  });
})(jQuery);

Wordpress - 主导航点击打开子菜单

2 个答案: