I'我设计了一个下拉菜单，onclick会出现，而on blur会消失

I'm styling a drop down menu that onclick will appear and on blur will disappear

本文关键字：下拉菜单 onclick 消失 blur on 一个      更新时间：2023-09-26

不幸的是，我遇到了下拉列表消失的问题。我目前正在使用toggleClass在点击时添加/删除类，但当菜单模糊时，我也需要撤销这个过程，即：点击页面上的其他任何地方等。这是我的jquery代码：

$(function() {$('#srt-btn').click(function() {$('ul.toggle-off').toggleClass('toggle-on')});});
<ul id="sort">
<li><a id="srt-btn" class="srt-title">Sort ▾</a>
        <ul class="sort-menu toggle-off">
            <div class="droid"></div>
            <li class="top"><a href="#">Notes</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Videos</a></li>
            <li class="divider"></li>
            <li class="btm"><a href="#">Make List</a></li>
    </ul>
    </li>


function toggleMenu() 
{   
     $('ul.toggle-off').toggleClass('toggle-on');
}

$(function() {
     $('#srt-btn').click(toggleMenu);
     $('#srt-btn').blur(toggleMenu);
});

工作示例。

您也可以使用stopPropagation来取消点击事件

$(function() {
    $('#srt-btn').click(
        function(e) {
            $('ul.sort-menu').slideToggle();
            e.stopPropagation();
        }
    );
    $('.sort-menu li').click(
        function(e) {
            $('ul.sort-menu').slideUp();
            e.stopPropagation();
        }
    );
    $(document).click(
        function(){
            $('ul.sort-menu').slideUp();
        }
    );
});

别忘了把菜单选项ul设置到位置：绝对否则你的元素会改变

这是一个jsFiddle

你可以试试这样的东西：

var IsInside = false,
    $sortMenu = $('#sort'),
    $toggleOn = $('.toggle-off');
$sortMenu.on('mouseenter', '#srt-btn', function(){
  IsInside = true;
}).on('mouseleave', '#srt-btn', function(){
  IsInside = false;
});
$sortMenu.on('click', '#srt-btn', function(){
  $toggleOn.toggleClass('toggle-on');
});
$(document).on('click', 'body', function(){
  if(!IsInside) {
    $toggleOn.removeClass('toggle-on');
  }
});

这是一个jsFiddle。

相关文章：