在小屏幕尺寸下如何将巨型菜单悬停更改为单击？

Question

如何将巨型菜单悬停更改为单击？

 $(function() { $(".dropdown").hover( function() { $('.dropdown-menu', this).stop(true, true).fadeIn("slow"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop(true, true).fadeOut("slow"); $(this).toggleClass('open'); }); }); 

我将.hover更改为.click，但是它不起作用。

Answer 1

您需要复制悬停方法。 没有DOM也很难确定，但是类似的东西应该可以工作。

$(function() {
  $(".dropdown").click(function() {
    if($(this).hasClass('open')) {
      $('.dropdown-menu', this).stop(true, true).fadeOut("slow");
      $(this).toggleClass('open');
    } else {
      $('.dropdown-menu', this).stop(true, true).fadeIn("slow");
      $(this).toggleClass('open');
    }
  });
});

基本上，您需要检查菜单是否打开，并运行通常在悬停时会触发的代码。

希望这可以帮助。

Answer 2

当单击下拉菜单时，如果当前项处于隐藏状态，那么我将使用fadeIn显示或打开元素。 否则，如果它已被打开或未被隐藏，则使用fadeOut关闭它。

同样在第二段代码中，我确保当您单击菜单组件外部的任何位置时，菜单都将关闭。

$(function() {
  $(".dropdown").click(function() {
    if($(this).find(".dropdown-menu").is(":hidden")){
      //opening menu when it is not open already
      $(".dropdown-menu").hide();
      $('.dropdown-menu', this).stop(true, true).fadeIn("slow");
    }
    else{
      //closing menu when it is open already on same item click
      $('.dropdown-menu', this).stop(true, true).fadeOut("slow");

    }
  });
});
$('html').click(function() {
  //Hide the menus if visible when click outside menu
  $('.dropdown-menu', this).stop(true, true).fadeOut("slow");
});

$('.dropdown, .dropdown-menu').click(function(event){
  event.stopPropagation();
});