如何使用关闭按钮创建这个多动态 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>

Answer 1

工作小提琴。

您还必须为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>

Answer 2

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

Answer 3

只需使用关闭事件，例如，

$('.close').on('click',function(){
$(this).closest('.tab-content').hide();
});

片段

var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show();
post = $target.closest('.post');
post.addClass(post.attr('data-classes') + 'long');
$allTargets = $contents.not($target);
$allTargets.each(function() {
post = $(this).closest('.post');
post.removeClass(post.attr('data-classes') + 'long');
$(this).hide();
});
});
$('.close').on('click', function() {
$(this).closest('.tab-content').hide();
});

.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
[class$='long'] .tab {
color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post1 post" data-classes='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 post" data-classes='post2'>
<div id="tab2" class="tab">Show 2</div>
<div id="tab2show" class="tab-content">
content 2
<div class="close">close</div>
</div>
</div>
<br><br><br>

Answer 4

试试这个：

var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show().addClass('long');
$('.tab').show();
$contents.not($target).hide().removeClass('long');
$(this).hide();
});
$('.close').click(function() {
var tab = $('#' + $(this).attr('data-tab'));
var tabContent = $(this).parent();

tab.show();  
tabContent.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" data-tab="tab1">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" data-tab="tab2">close</div>
</div>
<br><br><br>