Question

我有一个隐藏的搜索栏。当我单击链接时，它会淡入。这是另一个DIV。

我想在单击链接本身（使其显示）时也单击它，同时在出现的元素之外单击时也将其关闭。

当我在元素外部单击时，我当前的代码有效。搜索栏消失。但是，当我单击链接本身时，它会重新出现。

该如何解决？

$(".search-toggle").click(function(e) {
  e.stopPropagation();
  $("#search-toggle-nav").slideToggle('slow', function() {
    $(".search-toggle").toggleClass('active');
  });
  $(document).mouseup(function(e) {
    var container = $("#search-toggle-nav");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      container.fadeOut();
    }
  });
});

我有一个WordPress菜单，其链接为Search。我想实现

单击搜索时，将显示搜索栏。
在搜索栏之外单击时，我想将其关闭。
再次单击“搜索”链接（在菜单中）时，我要关闭它。

<div class="section--top">
  <div class="container">
    <div class="row between-xs">
      <div class="mobile-navigation"></div>

      <nav id="top-navigation" class="top-header-navigation navigation">
        <?php
                        wp_nav_menu( array(
                'theme_location' => 'menu-4',
                'menu_id'        => 'top-menu',
                        ) );
                    ?>
      </nav>
      <!-- #site-navigation -->
      <nav id="social-navigation" class="top-social-navigation navigation">
        <?php
                wp_nav_menu( array(
                            'theme_location' => 'menu-5',
                            'menu_id'        => 'social-menu',
                        ) );
                    ?>
      </nav>
    </div>
  </div>
</div>

<div id="search-toggle-nav" class="panel">
  <div class="search-wrapper">
    <?php get_search_form(); ?>
  </div>
</div>

Answer 1

您可以尝试使用以下代码，该代码未经测试，但应该可以完成。

您可以看到HERE的搜索表单具有默认的id值，因此您可以在输入字段中设置处理程序，只要它失去焦点，就可以fadeOut对其容器进行操作。

$(".search-toggle").click(function(e) {
    e.stopPropagation();
    $("#search-toggle-nav").slideToggle('slow', function() {
        $(".search-toggle").toggleClass('active');
    });

});

$('#s').on('focusout', function(e) {
    $("#search-toggle-nav").fadeOut('slow', function(){
        $(".search-toggle").removeClass('active');
    });
});

jQuery搜索崩溃

1 个答案: