Question

我试图让jQuery下拉菜单同时适用于移动设备和桌面设备（触控和非触控设备）。

一切都按预期工作，但我无法选择＆＃39;要打开/关闭的类。另外，如果您有任何建议使其更高效，请告诉我。

$(function(){

  $('li.nav__main__item--has-children > a').on('click',function(event){

    event.preventDefault();

    $(this).toggleClass('selected');

    $(this).parent().find('ul').first().toggle(300);

    $(this).parent().siblings().find('ul').hide(200);

    //Hide menu when clicked outside
    $(this).parent().find('ul').on('mouseleave touchend',(function(){ 
      var thisUI = $(this);

      $('html').click(function(){
        thisUI.hide();
        $('html').unbind('click');
      });
    }));

  });
});

这是Codepen的完整示例：https://codepen.io/friendlywp/pen/WXpXWv

感谢您的帮助。

Answer 1

$（函数（）{

$（＆＃39; li.dropdown＆gt; a＆＃39;）。on（＆＃39;点击＆＃39;，功能（事件）{

event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);

$(this).parent().siblings().find('ul').hide(200);

//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){ 
  var thisUI = $(this);
  $('html').click(function(){
    thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');

    $('html').unbind('click');
  });
});

}）;

https://codepen.io/piscu/pen/EbWQda

在mouseleave或touchend上切换类

1 个答案: