Question

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

点击 a.navbar-toggle.search 时会下拉＆amp;显示 .search-wrapper div
当它显示 .search-wrapper div时，它还会将一个类（隐藏）添加到以下div中以隐藏它们：

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

以上都很好＆amp;运作良好。

点击链接后，将其更改为：

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

问题：

我现在需要的是在点击以下div时显示/带回上述div（在第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

<强> FYI

toggle

is()

jquery隐藏div单击功能，然后在单击相同链接时返回

1 个答案: