Question

我需要帮助我的jQuery菜单脚本。

这是JSFiddle：http://jsfiddle.net/sentimancho/6augy27b/

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

我想添加一个与悬停式操作完全相同的点击操作，但经过各种测试后我无法实现（我认为这很简单......）。

细节上的麻烦：移动设备中的人（你无法在JSFiddle上看到这个）必须完全点击小的右箭头来访问菜单子级别，这是唯一的方法，因此它不是用户友好的。

我想要的是：如果一个人点击菜单顶层（例如“Résultats”//在整条线的任何地方），它会显示/开发诸如“Equipepremière（D2 - Groupe”）之类的子级别A）“和另外两个人。

这正是hover目前在JSFiddle上所做的事情，但我想将它扩展到菜单顶层的点击（同时保持两者：hover + click）。

理想情况下，另一次点击会隐藏菜单子级别，就像点击时常用的显示/隐藏功能一样。

PS：当然，我可以在这个菜单顶层放置href属性（但你现在应该不需要它：没有页面与顶层关联）。

感谢您的帮助！

贝特朗

Answer 1

将点击事件添加到顶级标签。这是更新后的JSFiddle：http://jsfiddle.net/6augy27b/10/

$('#site-navigation a:not([href])').click(function () {
        $(this).next().toggleClass('open').next('ul').slideToggle(300);
});

Answer 2

这是一个新的jsfiddle。
http://jsfiddle.net/6augy27b/14/
我从第14行的选择中取出了fa。

$('#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children')

我将悬停更改为单击此示例。在此之前，您应该检查哪个设备，以便您可以进行悬停（桌面）或点击（移动）

在我的顶级菜单链接上添加jQuery单击操作

2 个答案: