切換隻顯示點擊的內容 - 隱藏其他

我需要切換內容的幫助 - 在幾列中，我做了隱藏的內容，它顯示在按鈕點擊。（在窗格生物文本點擊BTN-切換顯示內容）切換隻顯示點擊的內容 - 隱藏其他

<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'); 
    }); 
});

所以這是工作，但允許所有窗格中打開在同一時間。我需要幫助才能使這個排他性的內容窗格顯示出來。

在此先感謝

來源

2017-01-20 Lanchushki

請添加滿標記，以便我們提供幫助。 – Ionut

你想讓手風琴作出來嗎 –

只是隱藏點擊功能內的一切，然後再滑動正確的開放。

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>

來源

2017-01-20 09:15:43

我不認爲這是用戶擁有的HTML。您可以從代碼中清楚地看到他在查找「父」元素。 – Ionut

這也不能正常工作..如果我想要初始狀態，就像開始 - 隱藏所有面板一樣？ Hre是一件事 - 先點擊第一個展開...想象一下下一步 - 我沒有摺疊前一個面板，並點擊面板2的按鈕2.我需要功能來顯示，然後只是面板2所有其他關閉。現在更清楚了嗎？ – Lanchushki

@Lanchushki，不，你需要發佈完整的代碼。這就是爲什麼人們感到困惑。請發佈整個HTML。 – Ionut

你可以寫這樣的劇本：

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

例如：https://jsfiddle.net/nkgLzaeq/

如果你想保持活躍的只有1面板，你需要刪除主動類和隱藏所有的面板，然後設置爲當前面板活動

來源

2017-01-20 09:16:30

我不認爲這是用戶擁有的HTML。您可以從代碼中清楚地看到他在查找「父」元素。 – Ionut

他沒有顯示HTML的完全標記，所以我認爲他只想知道如何編寫活動只有1面板的腳本。 –

@NguyễnHuy正好 – Lanchushki

切換隻顯示點擊的內容 - 隱藏其他

回答

相關問題