Question

我有一个下拉列表，其中每个项目都关闭，直到您单击该特定项目。

HTML：

<div id="dropdowntabs">
  <h2 class="drop">
    <a id="tabhead1" href="javascript:dropdowntabs('droptab1');">MAIN TITLE</a>
  </h2>
  <div name="droptab" class="droptab" id="droptab1" style="display:none;">
    <p>TEXT TO SHOW</p>
  </div>
</div>

使用Javascript：

function dropdowntabs(selectedtab) {
   $('div[name|="droptab"]').each(function(index) {
      if ($(this).attr("id") == selectedtab) {
         $(this).show(200);
      }
      else {
         $(this).hide(600);
      }
   });
}

每个droptab都分配了不同的编号。这在HTML中运行良好，但我想在Wordpress中使用它，因为我无法手动为每个选项卡分配一个数字，当单击一个时它们都会打开。

有人可以解释我如何能够自动增加数字。

非常感谢，杰森。

Answer 1

请改用通用遍历。在事件处理程序this中是事件发生在该元素上并从该元素开始的元素，您可以遍历到相应的匹配元素

$('.drop a').click(function() {
  var $content = $(this).parent().next().show(200)
  $('.droptab').not($content).hide(200);
});

.droptab {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <h2 class="drop">
    <a>MAIN TITLE</a>
  </h2>
  <div class="droptab">
    <p>MAIN TITLE CONTENT</p>
  </div>
  <h2 class="drop">
    <a>SECOND TITLE</a>
  </h2>
  <div class="droptab">
    <p>SECOND TITLE CONTENT</p>
  </div>
</div>

Answer 2

您已经拥有了几乎所有代码：请查看示例：

在这个例子中，我们不再需要id，我们使用相应的索引来选择和显示。

//select on index not on ID

function dropdowntabs(selectedtab) {
  //select the index number comparing the clicked element to it's nodelist
  $('div.droptab').each(function(index) {
    if ($(this).index('div.droptab') == selectedtab) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}

//Assign the click events
$('h2.drop > a').on("click", function(e) {
  //select the index number comparing the clicked element to it's nodelist
  dropdowntabs($(this).index("h2 > a"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <a></a>
  <!-- assign click handlers through code -->
  <h2 class="drop"><a id="tabhead1" href="javascript:void(0);">MAIN TITLE</a> <a id="tabhead2" href="javascript:void(0);">MAIN TITLE 2</a></h2>
  <div name="droptab" class="droptab" style="display:none;">
    <p>TEXT TO SHOW</p>
  </div>
  <div name="droptab" class="droptab" style="display:none;">
    <p>TEXT TO SHOW</p>
  </div>
</div>

如何使用Javascript为每个下拉选项卡添加唯一编号

2 个答案: