jquery 隐藏 div 的点击功能,然后在点击相同的时候带回来 link

jquery hide div's click function, then bring back when clicking same link

我正在使用以下脚本执行以下操作:

  1. 单击 a.navbar-toggle.search 时,它会下拉并显示 .search-wrapperdiv

  2. 当它显示 .search-wrapper div 时,它还会添加一个 class(隐藏)到以下 divs 隐藏它们:

.strapline-top / .container.inner / .gallery/ .boxes

以上都很好,运行良好。

单击 link 后,它会更改为:

<a href="#" class="navbar-toggle search show">

问题:

我现在需要的是在单击以下 div 时 show/bring 返回上面的 divs(第 2 点):

<a href="#" class="navbar-toggle search show">

jQuery 正在使用的脚本:

<script type="text/javascript">
  $(function ($) {
    var search_wrapper = $('.search-wrapper');
     $('a.navbar-toggle.search').click(function () {
        $(this).toggleClass('show');
        $('.strapline-top').addClass('hide');
        $('.container.inner').addClass('hide');
        $('.gallery').addClass('hide');
        $('.boxes').addClass('hide');
        search_wrapper.slideToggle(400);
        if ( $(this).hasClass('show') ) {
            $('a.navbar-toggle.user').removeClass('show'); // mark the other as hidden
            mywinkworth_wrapper.slideUp(400); // hide the other one
        }
        return false;
    });
  });
</script>

实现此目标的最简单方法是什么?

JSFiddle Here

希望这就是你需要的伙计..:)

$(function ($) {
    var search_wrapper = $('.search-wrapper');
     $('a.navbar-toggle.search').click(function () {
        $('.strapline-top,.container.inner,.gallery,.boxes').toggle();
        search_wrapper.slideToggle(400);
         if ( $(this).is(':visible') ) {
            $('a.navbar-toggle.user').toggle();; // this is changing another div's class - mark the other as hidden
            mywinkworth_wrapper.slideUp(400); // for the above - hide the other one
        }
        return false;
    });
  });

Fiddle

仅供参考

toggle

is()