javascript - 如何使用关闭按钮创建此多个动态 id 特定的 Accordion ？

Question

我想制作 Accordion 。当我单击“显示”时，我希望隐藏文本“显示”并显示内容和“关闭”按钮。当我点击“关闭”时，我想隐藏内容和“关闭”按钮并显示“显示”按钮。

每个文本都必须在 HTML 中，而不是在 JS 中。但是我将它连接到 Wordpress 动态 id 帖子以在索引页面上显示和隐藏更多内容。

这是我的尝试，但“关闭”按钮不起作用。

这必须处理多个 id 项，因为我将其连接到 Wordpress 索引帖子页面。

我可以添加更改这些显示/关闭按钮的类吗？我想如果我单击“显示”按钮的父级，另一个元素会更改类，如果我单击“关闭”按钮的父级，另一个元素会更改类？

var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
  var $target = $('#' + this.id + 'show').show();
  $contents.not($target).hide();
});

.tab {
  background: red;
  max-width: 100px;
  cursor: pointer;
}

.close {
  border: 1px solid red;
  max-width: 100px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab1" class="tab">Show 1</div>
<div id="tab1show" class="tab-content">
  content 1
  <div class="close">close</div>
</div>

<br><br><br>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
  content 2
  <div class="close">close</div>
</div>

Answer 1

Working fiddle .

您还必须为 close 按钮添加一个点击事件，例如:

var $contents = $('.tab-content');
$contents.slice().hide();

$('.tab').click(function() {
  removeNewClass();

  var $target = $('#' + this.id + 'show').show();
  var newClass = 'post' + this.id.split('tab')[1] + 'long';

  $(this).hide().parent().addClass(newClass);
  $('.tab').show();
  $contents.not($target).hide();
});

$('.close').click(function() {
  removeNewClass();

  $(this).parent().hide();
  $(this).parent().prev('.tab').show();

  var $target = $(this).parent();
});

function removeNewClass() {
  $contents.each(function() {
    var id = $(this).attr('id');
    var postClass = 'post' + id.split('tab')[1];

    $(this).parent().attr("class", postClass);
  });
}

.tab {
  background: red;
  max-width: 100px;
  cursor: pointer;
}

.close {
  border: 1px solid red;
  max-width: 100px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="post1">
  <div id="tab1" class="tab">Show 1</div>
  <div id="tab1show" class="tab-content">
    content 1
    <div class="close">close</div>
  </div>
</div>


<br><br><br>

<div class="post2">
  <div id="tab2" class="tab">Show 2</div>
  <div id="tab2show" class="tab-content">
    content 2
    <div class="close">close</div>
  </div>

  <br><br><br>
</div>