Question

我正在尝试制作一个可以切换的菜单，并希望它可以在模糊时切换。目前它只在点击切换按钮时切换。当你模糊菜单时，如何切换出来？我尝试了两种方法，但似乎无法发挥作用。

HTML：

<button class="one">Toggle 1</button>
<ul class="one">
    <li>1</li>
</ul>

<button class="two">Toggle 2</button>
<ul class="two">
    <li>2</li>
</ul>

使用Javascript：

$("button.one").click(function(){
  $("ul.one").slideToggle();
  $("body")
    .not("ul.one")
    .not("button.one")
    .one("click",function(){$("ul.one").slideToggle();});
});


$("button.two").click(function(){
    $("ul.two").slideToggle().focus().blur(function(){
        $(this).slideToggle();
    });    
});

Answer 1

我认为您需要触发 mouseenter 和 mouseleave 事件。输入失去焦点时会触发 onblur 事件，并且您的html中没有任何输入。

<强>已更新

现在您可以使用按钮打开和关闭菜单，并在您离开菜单时隐藏它。

    $("button.three").click(function(){
       $("#menu3").find('li:not(:first-child)').slideToggle();   
    });

    $("#menu3")
     .on( "mouseleave", function() {
        var menuLi = $(this).find('li:not(:first-child)');
         if(menuLi.is(':visible')){
              menuLi.slideToggle();
         }
     });

Here完整的工作示例。

Answer 2

试试这个，

$("#menu3").on('click', function() {
    $(this).find('li:not(:first-child)').slideToggle();
});

Updated fiddle

ToggleOut模糊？

2 个答案: