Question

如何在点击时更改大型菜单？

＆＃13;

$(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');
        });
});

＆＃13;

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

如何更改大型菜单悬停在点击小屏幕尺寸上？

2 个答案: