javascript - 如何使用关闭按钮创建这个多动态 id 特定的手风琴？

Question

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

每个文本都必须在 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>

标签： javascriptjqueryhtmlcss

Answer 1

.close为此添加一个事件。

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

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

$('.close').click(function(){
  $(this).parent().hide();
  let parentId = $(this).parent().attr('id');
  parentId = parentId.replace('show','');
  
  $('#'+parentId).show();
  
});

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

<br><br><br>