Jquery搜索崩溃

Question

我有一个隐藏的搜索栏。当我点击一个链接，它就消失了。这是另一种设计。

我想关闭它时，我点击链接本身(使它出现)，但也当我点击外部的元素出现。

当我单击元素外部时，我的当前代码可以工作。搜索栏消失。但是当我点击链接本身，它就会重新出现。

我该怎么解决这个问题？

$(".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菜单。我想要实现

• 单击“搜索”时，将出现搜索栏。
• 当单击搜索栏的外部时，我想关闭它。
• 当再次单击搜索链接(在菜单中)时，我想关闭它。

<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

您可以尝试使用下面的代码，它没有经过测试，但应该完成它的工作。

正如您可以看到的这里，搜索表单具有默认的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');
    });
});