Question

我有一个包含下拉菜单的导航栏。下拉菜单中的Javascript会在单击下拉按钮时更改插入符号的方向。但是，当单击下拉菜单中的任何空格时，下拉菜单将崩溃。我在下拉菜单中有一个搜索栏，无法使用。我将如何更改JavaScript，使其仅在单击按钮时折叠并展开。

JavaScript

<script>
$(document).ready(function(){
  $('.dropdown').click(function(e){
    $(this).find('.dropdown-menu').toggleClass('show');
    $($(e.target).find('.down-caret').toggleClass('open-caret'));
    e.preventDefault();
    e.stopPropagation();
    $(document).click(function(){
      $('.dropdown-menu').removeClass('show');
      $('.down-caret').removeClass('open-caret');
    });
  });
});
</script>

Answer 1

首先，我认为您可以移动

$(document).click(function(){
    $('.dropdown-menu').removeClass('show');
    $('.down-caret').removeClass('open-caret');
});

从点击侦听器中分离出下拉菜单。否则，每次打开下拉列表时，您都将附加侦听器。另外，如果页面上只有一个.down-caret，则可以简化

$($(e.target).find('.down-caret').toggleClass('open-caret'));

到

$('.down-caret').toggleClass('open-caret'));

然后您可以尝试做的一件事是过滤监听器以关闭下拉菜单

$(document).not('#search').click(function(){...}

但是，您可以使用它来标识搜索栏。另一种方法是捕获搜索栏的click事件并停止传播

$('#search').click(function(){
    return false;
});

考虑到所有这些因素，修改后的代码可能类似于：

<script>
$(document).ready(function(){
  $('.dropdown').click(function(e){
    $('.dropdown-menu').addClass('show');
    $('.down-caret').addClass('open-caret');
    e.preventDefault();
    e.stopPropagation();
  });
  $(document).not('#search').click(function(){
    $('.dropdown-menu').removeClass('show');
    $('.down-caret').removeClass('open-caret');
  });
});
</script>

JS下拉式Caret动画中断输入

1 个答案: