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

Question

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

单击 a.navbar-toggle.search 时，它会下拉并显示 .search-wrapperdiv
当它显示 .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

Answer 1

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

$(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()

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

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

jquery

addclass

var

function

click