JS下拉插入动画中断输入
JS下拉插入动画中断输入
提问于 2018-08-01 06:30:38
我有一个包含下拉菜单的导航栏。下拉菜单有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>回答 1
Stack Overflow用户
回答已采纳
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51623021
复制相关文章
相似问题