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() {
  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 2

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>

Answer 3

尝试一下：

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>

Answer 4

只需使用close事件，如

$('.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>

如何使用关闭按钮创建多个特定于动态ID的手风琴？

4 个答案: