我有一个包含下拉菜单的导航栏。下拉菜单有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>
发布于 2018-08-01 06:50:36
首先,我认为您可以将
$(document).click(function(){
$('.dropdown-menu').removeClass('show');
$('.down-caret').removeClass('open-caret');
});
下拉列表的单击监听程序的一部分。否则,您将在每次打开dropdown时附加侦听器。此外,如果页面上只有一个.down-caret
,则可以简化
$($(e.target).find('.down-caret').toggleClass('open-caret'));
至
$('.down-caret').toggleClass('open-caret'));
然后,您可以尝试过滤监听器以关闭下拉列表
$(document).not('#search').click(function(){...}
但是,您可以使用来识别搜索栏。另一种方法是捕获搜索栏的单击事件并停止传播
$('#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>
https://stackoverflow.com/questions/51623021
复制相似问题