Question

我设法用不同的链接切换div。但是，当我尝试制造更多相同的盒子时，它将不再起作用。

想象一下，我喜欢10个条目-所有分隔的div'entry'

  <div class="entry" id="1">

我想分别隐藏和显示具有多个链接的内容。

我的问题是，自5个小时以来，我一直在尝试解决此问题，但是哪一个div条目起作用了，而有超过1个div条目却没有起作用。

我尝试使用

$(".entry").each(function() {

这是我的代码：

$(document).ready(function() {
  $(".entry").each(function() {
    var b4c = $('.lower_menu').html(); // content of box 4 so that we cn refer to it later
    $(".menu1,.menu2,.menu3").click(function() {
      var active_content = $(".lower_menu").data('content');
      var cls = $(this).attr('class');
      if (active_content == '') {
        $(".lower_menu").html($("." + cls + '_CONTENT').html())
        $(".lower_menu").data('content', cls);
      } else {
        if (active_content == cls) {
          $('.lower_menu').html(b4c).data('content', '');
        } else {
          $(".lower_menu").html($("." + cls + '_CONTENT').html())
          $(".lower_menu").data('content', cls);
        }
      }
    });
  });
});

.menu1 {height:40px; background-color:red;}
.menu2 {height:40px; background-color:green;}
.menu3 {height:40px; background-color:blue;}

.menu1_CONTENT {display:none; background-color:red;}
.menu2_CONTENT {display:none; background-color:green;}
.menu3_CONTENT {display:none; background-color:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="entry">
  <div class="menu1">
    <span id="arrow_prod" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 1
  </div>
  <div class="menu2">BOX 2</div>
  <div class="menu3">BOX 3</div>

  <!-- data-content is to check do we have content or which boxes's content do we hv now -->
  <div class="lower_menu" data-content=""></div>
  <div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
  <div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
  <div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>

<div class="entry">
  <div class="menu1">BOX 1</div>
  <div class="menu2">BOX 2</div>
  <div class="menu3">BOX 3</div>

  <!-- data-content is to check do we have content or which boxes's content do we hv now -->
  <div class="lower_menu" data-content=""></div>

  <div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
  <div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
  <div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>

...和一个JSFiddle

Answer 1

这是jquery的官方错误！我们找到了一个家伙！ YEEEHAA

显示/隐藏来自单独链接的div _多个框问题

1 个答案: