切換一個div在點擊時顯示，同時切換另一個以隱藏

有兩個表示相同數據的div，只有一個更詳細。在按鈕點擊時，我需要滑動切換第一個div，然後切換打開或slideDown第二個。基本上切換顯示的內容，但它需要在兩個單獨的div中，因此它不能在同一個div中進行基本切換。任何想法請：切換一個div在點擊時顯示，同時切換另一個以隱藏

HTML：編輯

<div id="basicTermsRow"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <div class="standardList"> 
     <ul> 
      <li>Random Data</li> 
      <li>This be the div I need to hide<span class="glyphicon glyphicon-cloud"></span></li> 
     </ul> 
     </div> 
    </div> 
</div> 
</div> 

<div id="expandedTerms"> 
<div class="row"> 
    <div class="col-lg-12"> 
<p>Good Bye</p> 
</div>

JS：

$("#editButton").click(function() { 
$("#basicTermsRow").slideToggle("fast"); 
});

小提琴：

http://jsfiddle.net/ZB8u9/1/

來源

2014-01-20 isaac weathers

哪兩個div？詳細和一般？你的意思是'li'elements？ – Sergio

你想做什麼？ –

田田 - > http://jsfiddle.net/ZB8u9/5/ – adeneo

你需要做的第一件事是讓最初隱藏的展開div。然後爲了實現你想要的，你可以簡單地在用戶按下按鈕時切換兩個div。像這樣：

<div id="expandedTerms" style="display:none">

儘管隱藏在CSS中避免內聯樣式是可取的。

該腳本將是這樣的：

$("#editButton").click(function() { 
    $("#basicTermsRow").slideToggle("fast"); 
    $("#expandedTerms").slideToggle("fast"); 
});

http://jsfiddle.net/ZB8u9/3/

來源

2014-01-20 14:18:34 EasyPush

就是這樣。謝謝。大腦今天早上不工作。我會在五分鐘內將它作爲答案來檢查，當它讓我。感謝輕鬆！ –

我想你需要先隱藏其中的一個，否則就有點扯淡。我的建議

$("#expandedTerms").hide(); 
$("#editButton").click(function() { 
    $("#basicTermsRow").slideToggle(); 
    $("#expandedTerms").slideToggle(); 
});

來源

2014-01-20 14:20:23 sis

如果我理解正確的話，考慮到這兩個條目是行項目，我會建議他們指定一個類，這樣就可以申請任何種類的切換要他們每個人。示例請參閱JSFiddle。

$("#editButton").click(function() { 
$(".hideDiv").slideToggle("fast");} 
);

來源

2014-01-20 14:21:57 Craighead

切換一個div在點擊時顯示，同時切換另一個以隱藏

回答

相關問題