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

【问题标题】：How can I hide all element when one is opened打开一个元素时如何隐藏所有元素
【发布时间】：2015-09-14 08:11:37
【问题描述】：

如何在打开一个 div 时隐藏所有其他 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>

【问题讨论】：

添加了 OPs jsfiddle：jsfiddle.net/kodjoe/gufe44c9

标签： javascript jquery css toggle show-hide

【解决方案1】：

我会更改您的代码以简化它，并通过为您的翻转 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

【讨论】：

【解决方案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>

【讨论】：

感谢它完美运行

【解决方案3】：

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

您需要将“filps”作为类添加到所有翻转 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
       }
   });
});

【讨论】：

【解决方案4】：

您不需要三个单独的处理程序。您可以为 div 翻转设置一个通用类（例如 flip），并为翻转div 旁边的所有 div 设置另一个通用类（例如 flipnext）：

修改的 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

【讨论】：

【解决方案5】：

给所有的翻转 div 一个通用类，例如：“flipper”。有了这一类，您只需要在 jquery 中调用一个函数。我添加了一个数据参数 (mtarget) 来获取您想要打开和关闭的 div 的链接。

要标记您的哪个“mtarget-divs”是打开的，请向它们添加一个类。例如：“flip-active”。

现在，如果您单击向下滑动一个 div，它会被标记为活动，如果另一个之前是活动的（使用“翻转活动”类），它应该向上滑动。

见这里示例代码：

<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();
   });

【讨论】：

准确、完美、简单