jQuery打开关闭两个单独的div，一个一个的类答案

【问题标题】：jQuery open close two separate div one by one with same classjQuery打开关闭两个单独的div，一个一个的类
【发布时间】：2019-06-10 03:15:59
【问题描述】：

我想用同一个类一个一个地打开和关闭两个单独的 div。

下面的例子当我第一次点击opentabcontent 1第一次打开，第二次点击content 2第二次打开。

按照内容2和内容1逐个关闭div。

Reference link

评论进一步澄清。提前致谢。

$(document).ready(function() {
   $(".opentab").on('click', function () {
   $('.tabcontent').toggle('show');
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="opentab" id="opentab">Open tab</a>

<div class="tabcontent">
    Content 1
</div>
<div class="tabcontent">
    Content 2
</div>

【问题讨论】：

我有点不清楚，尤其是这句话："Closing the div as following on the same click content 2 first and content 1 second."。每次单击Open Tab 链接时，只会出现一个项（下一项）。对吗？
@TylerRoper 类似这个菜单切换dore-jquery.coloredstrategies.com/Dashboard.Default.html
嗯。 Like this?
是的。但我也想一一打开div。
@TylerRoper 根据我的参考资料i.imgur.com/RtkRy13.png 结帐

标签： javascript jquery html css

【解决方案1】：

因为你需要知道你要去哪个“方向”（即下一次点击应该是打开还是关闭项目），我建议使用布尔变量来跟踪。我们称之为isClosing。

从逻辑上讲，你总是在做以下两件事之一：

如果关闭，隐藏last可见
如果打开，显示第一个隐藏

（代码中包含的注释）

let isClosing = true;  //We need to know if we're "closing" or "opening" the items

$(".opentab").on('click', function() {

  $(".tabcontent").finish();                //Skip animations if pressed rapidly

  const $elementToToggle = isClosing 
    ? $('.tabcontent:visible').last()       //If "closing", toggle the last visible
    : $('.tabcontent:hidden').first();      //Otherwise, toggle the first hidden

  $elementToToggle.toggle('show', () => {                         //Callback to wait for animation to complete
    if (!$(".tabcontent:visible").length) isClosing = false;      //All hidden, switch to "opening"
    else if (!$(".tabcontent:hidden").length) isClosing = true;   //All visible, switch to "closing"
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="opentab" id="opentab">Open tab</a>

<div class="tabcontent">Content 1</div>
<div class="tabcontent">Content 2</div>
<div class="tabcontent">Content 3</div>
<div class="tabcontent">Content 4</div>

【讨论】：

抖动点击.opentab会导致卡住.tabcontent
@mark04 正在编辑答案以解决您评论的问题:)
@TylerRoper 有没有可能添加/删除类方法？

【解决方案2】：

隐藏您的第二个div 和您的切换工作。

$('.tabcontent').eq(1).hide();
$(document).ready(function() {
  $(".opentab").on('click', function() {
    $('.tabcontent').toggle('show');
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="opentab" id="opentab">Open tab</a>

<div class="tabcontent">
  Content 1
</div>
<div class="tabcontent">
  Content 2
</div>

带有隐藏和使用切换的替代设置计数器。

//$('.tabcontent').eq(1).hide();
var counter = 0;
$(".opentab").on('click', function() {
  $('.tabcontent').eq(counter).hide();
  counter++;
  if (counter > 1) // Reset counter
    counter = 0;
  $('.tabcontent').toggle('show');

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="opentab" id="opentab">Open tab</a>

<div class="tabcontent">
  Content 1
</div>
<div class="tabcontent">
  Content 2
</div>

【讨论】：