打开一个元素时如何隐藏所有元素

Question

如何在一个打开时隐藏所有其他 div。

这是我的 JS 部分：

$(document).ready(function() {
  $(".flipone").click(function() {
    $(".one").slideToggle("fast");
  });

  $(".fliptwo").click(function() {
    $(".two").slideToggle("fast");
  });

  $(".flipthree").click(function() {
    $(".three").slideToggle("fast");
  });
});

.one,
.two,
.three {
  display: none;
  color: #282828;
}
.flipone,
.fliptwo,
.flipthree {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flipone">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="one">span1span1span1span1span1span1spa n1span1span1span1span1span1span1span1span1</div>
<div class="fliptwo">two</div>
<div style="margin:10px 0px 80px 0px;" class="two">span1span1span1span1span1span1span1span1 span1span1span1span1span1span1 span1</div>

<div class="flipthree">three</div>
<div style="margin-top:10px;" class="three">span1span1span1span1sp an1span1span1span1span1span1span1span1span1spa n1span1</div>

Answer 1

您不需要三个单独的处理程序。你可以有一个共同的 class（比如 flip）用于 div 翻转，另一个共同的 class（比如 flipnext）用于接下来的所有 div翻转divs:

已修改 DOM：

<div class="flip">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="flipnext">
    span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1 span1span1span1span1span1</div>
<div class="flip">two</div>
<div style="margin:10px 0px 80px 0px;" class="flipnext">
    span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1
</div>
<div class="flip">three</div>
<div style="margin-top:10px;" class="flipnext">
    span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1
</div>

已修改 CSS:

.flipnext { display: none; color:#282828;}
.flip { margin-top:10px; }

需要脚本：

var filpnexts = $(".flipnext");
$(".flip").click(function(){
  var currentflipnext = $(this).next();
  filpnexts.not(currentflipnext).slideUp();
  currentflipnext.slideToggle("fast");
});

Working Demo

Answer 2

不需要有不同的处理程序

$(document).ready(function() {
  var $flips = $('.flip');
  $(".flipper").click(function() {
    var $cur = $(this).next().stop().slideToggle("fast");
    $flips.not($cur).stop().slideUp()
  });
});

.flip {
  display: none;
  color: #282828;
}
.flipper {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flipper">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flipper">two</div>
<div style="margin:10px 0px 80px 0px;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flipper">three</div>
<div style="margin-top:10px;" class="flip">span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>

Answer 3

使用 JQuery 我认为使用 $.each 循环你可以做到这一点...

您需要将 "filps" 作为 class 添加到所有翻转 div...像这些...

<div class="flipone flips">...</div>
<div class="fliptwo flips">...</div>
<div class="flipthree flips">...</div>

在Javascript中你可以使用JQuery的$.each循环函数来关闭除被点击的div之外的所有div

 $('.flips').on('click',function(){
  var element = $(this);
   $.each('.flips',function(index){
       if($(this) !== element){
          $(this).hide(); // Or any function you want to use
       }
   });
});

Answer 4

给你所有的翻转-div一个共同的class，例如："flipper"。有了这个 class，您只需要 jquery 中的一个函数调用。我添加了一个数据参数 (mtarget) 来为您要打开和关闭的 div 获取 link。

要标记您的 "mtarget-divs" 中的哪一个是开放的，请向它们添加 class。例如："flip-active".

现在如果你点击向下滑动一个 div 它会被标记为活动，如果另一个之前是活动的（class "flip-active"）它应该向上滑动。

查看示例代码：

<div class="flipper" data-mtarget="one">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" id="one">span1span1span1span1span1span1spa n1span1span1span1span1span1span1span1span1</div>
<div class="flipper" data-mtarget="two">two</div>
<div style="margin:10px 0px 80px 0px;" id="two">span1span1span1span1span1span1span1span1 span1span1span1span1span1span1 span1</div>

<div class="flipper" data-mtarget="three">three</div>
<div style="margin-top:10px;" id="three">span1span1span1span1sp an1span1span1span1span1span1span1span1span1spa n1span1</div>

   $(".flipper").click(function(){
      //is a flipper already active? Slide it up
      $('.flip-active').removeClass('flip-active').stop(true,true).slideUp();

      //find target div and add active class and slideDown
      $('#'+$(this).data('mtarget')).addClass('flip-active').stop(true,true).slideDown();
   });

Answer 5

我会更改您的代码以简化它，并通过为您的翻转 div 和信息 div 使用通用类使其更易于重用：

$(".flip").click(function() {
  var next = $(this).next();
  $('.info').not(next).slideUp('fast');
  next.slideToggle("fast");
});

.info {
  display: none;
  color: #282828;
}
.flip {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">one</div>
<div style="margin:10px 0px 80px 0px; display:block;" class="info">span1span1span1span1span1span1sp an1span1span1span1span1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flip">two</div>
<div style="margin:10px 0px 80px 0px;" class="info">span1span1span1span1span1span1span1span1span1span1sp an1span1span1span1span1span1span1span1span1span1span1</div>
<div class="flip">three</div>
<div style="margin-top:10px;" class="info">span1span1span1span1span1span1span1span1span1span1s pan1span1span1span1span1span1span1span1span1span1span1</div>

这看起来像手风琴的功能 - 如果您想要现成的手风琴，可以使用 jquery ui accordion

打开一个元素时如何隐藏所有元素

How can I hide all element when one is opened

javascript

css

jquery

toggle

show-hide