使打开的手风琴选项卡可见

Question

我现在有这个“手风琴类型”片段。 它会在单击时打开按钮下方的内容，然后再次将其关闭。 现在我正在寻找一种解决方案，使用户可以看到按钮的状态，例如，如果按钮 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。

演示

 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

您可以在按钮中添加一个空白跨度并更改点击功能中的内容（+ 或 -）。 检查第 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>