显示哪个手风琴选项卡是打开的

Question

我现在有个“手风琴型”片段。它打开按钮下面的内容，然后再次关闭它。现在我正在寻找一个解决方案，使按钮的状态对用户可见，例如，如果打开button 2，我想显示一个"-“表示它可以通过单击关闭。与关闭按钮相同，以显示"+“。这个是可能的吗？(预先谢谢:)

这是我现在的代码：

​

jQuery(function() {
  jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery(this).next('.ss_content').slideToggle('fast');
  });
  jQuery('.ss_content').eq(1).show();
});

#ss_menu {
  width: auto;
}

.ss_button {
  background-color: #049132;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 5px;
  color: #FFFFFF;
}

.ss_content {
  background-color: white;
  display: none;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
  <div class="ss_button">Einsteiger</div>
  <div class="ss_content">
    <p>Test1</p>
  </div>
  <div class="ss_button">Mittelklasse</div>
  <div class="ss_content">
    <p>Test2</p>
  </div>
  <div class="ss_button">High-End</div>
  <div class="ss_content">
    <p>Test3</p>
  </div>

</div>

​

Answer 1

我向您的css添加了一些更改：

.ss_button:before {
  content: "+ ";
}

.ss_button.active:before{
content: "- ";
}

然后，我们对active类进行了介绍：

jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
jQuery(this).toggleClass('active');

这样你就不用改变你的html了。

Demo

​

jQuery(function() {
  jQuery('.ss_button').on('click', function() {
    jQuery('.ss_button.active').not(jQuery(this)).removeClass('active')
    jQuery(this).toggleClass('active');
    jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
    jQuery(this).next('.ss_content').slideToggle('fast');
  });
  jQuery('.ss_content').eq(1).show();
});

#ss_menu {
  width: auto;
}

.ss_button {
  background-color: #049132;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 5px;
  color: #FFFFFF;
}

.ss_button:before {
  content: "+ ";
}

.ss_button.active:before{
content: "- ";
}

.ss_content {
  background-color: white;
  display: none;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
  <div class="ss_button">Einsteiger</div>
  <div class="ss_content">
    <p>Test1</p>
  </div>
  <div class="ss_button active">Mittelklasse</div>
  <div class="ss_content">
    <p>Test2</p>
  </div>
  <div class="ss_button">High-End</div>
  <div class="ss_content">
    <p>Test3</p>
  </div>

</div>

​

Answer 2

您可以在按钮中添加一个空的span，并在click函数中更改内容(+或-)。检查#4和#6行，相同的代码是相同的。

​

jQuery(function() {
  jQuery('.ss_button').on('click', function() {
    jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
    jQuery('.ss_button').find('span').text('+');
    jQuery(this).next('.ss_content').slideToggle('fast');
    jQuery(this).find('span').text('-');
  });
  jQuery('.ss_content').eq(1).show();
});

#ss_menu {
  width: auto;
}

.ss_button {
  background-color: #049132;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 5px;
  color: #FFFFFF;
}

.ss_content {
  background-color: white;
  display: none;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
  <div class="ss_button">Einsteiger 
    <span>+</span></div>
  <div class="ss_content">
    <p>Test1</p>
  </div>
  <div class="ss_button">Mittelklasse
    <span>+</span></div>
  <div class="ss_content">
    <p>Test2</p>
  </div>
  <div class="ss_button">High-End
    <span>+</span></div>
  <div class="ss_content">
    <p>Test3</p>
  </div>
</div>

​