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

我会更改您的代码以简化它，并通过为您的翻转div和info div使用公共类使其更具可重用性：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

您不需要三个单独的处理程序。你可以为div翻译提供一个公共类（比如flip），为flipdivs旁边的所有div提供另一个公共类（比如flipnext）：

MODIFIED 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>

MODIFIED CSS：

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

需要SCRIPT：

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

<强> Working Demo

Answer 3

无需使用不同的处理程序

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

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

你需要添加＆＃34; filps＆＃34;作为所有翻转div的类......就像这些......

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

在Javascript中，您可以使用JQuery的$ .each循环函数来关闭除了单击的那个之外的所有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 5

给所有的flip-divs一个普通的类，例如：＆＃34; flipper＆＃34;。有了这一个类，你只需要在jquery中调用一个函数。我添加了一个数据参数（mtarget）来获取要打开和关闭的div的链接。

标记你的＆＃34; mtarget-divs中的哪一个＆＃34;打开为他们添加一个类。例如：＆＃34;翻转活动＆＃34;。

现在，如果您点击向下滑动一个div，它会被标记为活动状态，如果之前的另一个div处于活动状态（使用类＆＃34;翻转活动＆＃34;）它应该向上滑动。

见这里的示例代码：

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

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

5 个答案: