Question

我有一个引导程序导航菜单，我还添加了一个搜索图标。搜索图标会在单击时显示搜索框。在搜索图标中添加了一个切换按钮，以显示和隐藏搜索框。

现在，当我点击搜索图标时，它处于打开状态，显示搜索框，然后我点击导航菜单中的任何一个下拉菜单，下拉菜单出现在搜索框上方。

点击任何其他下拉菜单后，我需要关闭搜索框。我知道它很简单，但没有得到适当的解决方案。有人可以建议吗？

以下是代码的链接： JSFiddle

$('.tablet-toggle a').click(function (e) {
if($('ul.dropdown-menu.tablet-toggle').css('display') == 'block'){
    $('.desktop-search').hide();
}

});

$(".search-icon").click(function () {
    $("#searchForm form").slideToggle("fast", function() {
        // Animation complete.
    });
});

Answer 1

检查出来，更新了小提琴：
http://jsfiddle.net/uw08ddmm/7/

$('a.dropdown-toggle').click(function (e) {
    $('.desktop-search').toggle();
});

Answer 2

您可以尝试以下代码：

点击导航栏中的任何下拉菜单时隐藏搜索表单。

$('.navbar a.dropdown-toggle').click(function (e) {
    // Use slideUp here to consist the animation behavior with slideToggle
    $('#searchForm form').slideUp('fast'); 
});

Answer 3

你试过这个吗？

window.onload = function(){
    $('.nav li.dropdown').click(function(){
        $('.desktop-search').hide();
    });
};

Answer 4

您可以尝试这样做：如果点击发生在页面的任何其他位置但是在搜索图标上，这将关闭搜索框：

<script>
$(document).ready(function(){
   $(document).on('click',function(){
      $('.desktop-search').hide();
   });
});
</script>

确保在搜索框打开事件中应写入以下行：

event.stopPropagation();

如何在点击另一个下拉链接时隐藏div？

4 个答案: