Question

我需要帮助切换内容 - 在几列中我制作了隐藏内容，按钮点击显示。（单击btn-show切换窗格生物文本中的内容）

<div class="wpb_wrapper">
 <div class="bio"><a class="btn-show">Arnold Schwarzenegger,Chairman, CEO    &amp; Partner</a></div>
 <p class="bio-text" style="display: none;">Arnold Alois Schwarzenegger (born July 30, 1947) is an Austrian-American actor, model, producer, director, activist, businessman, investor, writer, philanthropist, former professional bodybuilder, and politician. Schwarzenegger served two terms as the 38th Governor of California from 2003 until 2011.</p>
</div>

现在我有4个这样的包装器。它是通过jQuery实现的。问题是，目前如何制作，它支持所有切换活动。我需要重新格式化我的代码以仅允许1激活（单击其他隐藏除了单击的所有扩展内容）这是一个代码：

jQuery(document).ready(function ($) {
    $('.bio-text').hide();
    $('.btn-show').click(function () {
        // $this determines which button clicked on
        var $this = $(this);
        // grab the text that is NEXT to the button that was clicked on
        //var theText = $this.next();
        var theText = $this.parent().next(".bio-text");
        // Change the text of the button depending on if the text is hidden
        theText.slideToggle(500);
        $this.parent().toggleClass('highlight');
    });
});

所以这是有效的，但允许同时打开所有窗格。我需要帮助才能显示这个仅限于1的内容窗格。

提前致谢

Answer 1

首先隐藏点击功能中的所有内容，然后将正确的内容滑开。

PS：对不起，我稍微缩短了javascript代码。

jQuery(document).ready(function($){
  $('.bio-text').hide();
  $('.btn-show').on('click', function(e) {
    $('.bio-text:visible').slideUp(500).parent().removeClass('highlight');
    $(this).next(':hidden').slideDown(500).parent().addClass('highlight');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wpb_wrapper">
<a class="btn-show">Arnold Schwarzenegger,Chairman, CEO &amp; Partner</a>
<p class="bio-text">Arnold Alois Schwarzenegger (born July 30, 1947) is an Austrian-American actor, model, producer, director, activist, businessman, investor, writer, philanthropist, former professional bodybuilder, and politician. Schwarzenegger served two terms as the 38th Governor of California from 2003 until 2011.</p>
</div>
<div class="wpb_wrapper">
<a class="btn-show">Someone else</a>
<p class="bio-text">Texts</p>
</div>

Answer 2

您可以像这样编写脚本：

jQuery(document).ready(function ($) {
    $('.bio-text').hide();
    $('.btn-show').click(function () {
    $('.bio-text').hide();
        $(this).next('p').slideToggle();
    });
});

ex：https://jsfiddle.net/nkgLzaeq/

如果您只想在1个面板上保持活动状态，则需要删除活动类并隐藏所有面板，然后将当前面板设置为活动

切换仅显示单击的内容 - 隐藏其他内容

2 个答案: