我可以切換一個元素，同時隱藏其他元素嗎？

Question

我一直在尋找一段時間，但我恐怕我太begginer這個簡單的jQuery。

我試過顯示/隱藏和切換功能，但我沒有找到顯示頁面中的切換元素隱藏其他的方法。切換工作，但當我點擊一個我想其他人被隱藏，我不覺得方式。也許這太容易了，但我找不到答案。

這是我的jQuery

function toggleDiv(divId) { $("#"+divId).toggle();} 

這是HTML樣本

<a href="javascript:toggleDiv('div1');">Toggle Button 1</a> 
<div id="div1"> 
<p>paragraph 1</p> 
</div> 
<a href="javascript:toggleDiv('div2');">Toggle Button 1</a> 
<div id="div2"> 
<p>paragraph 2</p> 
</div> 

從來就只是創建了一個小提琴，解釋好我的意思：提前http://jsfiddle.net/vKLNe/

謝謝對你的幫助和對我的英語感到抱歉。

Answer 1

您需要添加class="toggle"到所有切換的div然後 http://jsfiddle.net/vKLNe/5/

function toggleDiv(divId) { 
    $("#"+divId).toggle(); 
    $('.toggle').not($("#"+divId)).hide(); 
} 

Answer 2

拍攝有人打我吧......但是，是的，你可以使用切換或表演，因爲你之前操作多個div您顯示當前點擊的div ...

function toggleDiv(divId) { 
    $('div').hide(); 
    $("#"+divId).toggle(); 
} 

唯一的缺陷是，如果你決定有不同的div做不同的事情，它可能會導致問題與他們。

Answer 3

雖然有很多方法可以做你自己喜歡弗雷迪和亞當的，你總是可以依靠某種預先定義的手風琴像jQuery UI的

http://jqueryui.com/accordion/

或啓動崩潰的

http://getbootstrap.com/javascript/#collapse

而且您不必擔心自己處理事件

Answer 4

你可以通過CSS類來做到這一點。

演示：http://jsfiddle.net/vKLNe/4/

使用隱藏和顯示類

，並在一次只有一個DIV將有表演課。

HTML：

<a href="javascript:toggleDiv('div1');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 1</a> 

<div class="hide" id="div1" style="background-color: #aaa; padding: 5px 10px; width:200px;"> 
<p>paragraph 1</p> 
</div> 
<br /><br /> 


<a href="javascript:toggleDiv('div2');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 2</a> 

<div class="hide" id="div2" style="background-color: #aaa; padding: 5px 10px; width:200px;"> 
<p>paragraph 2</p> 
</div> 
<br /><br /> 



<a href="javascript:toggleDiv('div3');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 3</a> 

<div class="hide" id="div3" style="background-color: #aaa; padding: 5px 10px; width:200px;"> 
<p>paragraph 3</p> 
</div> 

的Jquery：

function toggleDiv(divId) { 
    $(".show").addClass('hide').removeClass('show'); 
    $("#"+divId).addClass('show').removeClass('hide'); 
} 

CSS：

.hide { 

    display: none; 
} 
.show { 
display: block; 
} 

Answer 5

這是MUCH更實際的使用事件偵聽器相比，內聯JS：

的jQuery在

$(document).ready(function(){ 

    // listen for clicking of the <a> 
    $('a').on('click', function(e){ 
     // don't let the <a> perform it's default action 
     e.preventDefault(); 

     // hide all divs 
     $('div').hide(); 

     // show the <div> which is after the <a> which you clicked 
     $(this).next('div').show(); 
    }); 

}); 

HTML

<!-- notice the <a> tags have an href="#", no more inline JS! --> 
<a href="#" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 1</a> 

<div id="div1" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;"> 
    <p>paragraph 1</p> 
</div> 
<br /> 
<br /> 
<a href="#" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 2</a> 

<div id="div2" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;"> 
    <p>paragraph 2</p> 
</div> 
<br /> 
<br /> 
<a href="#" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 3</a> 

<div id="div3" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;"> 
    <p>paragraph 3</p> 
</div> 

請沒有這個代碼只工作，因爲你沒有做任何動畫，如褪色或滑動。 .hide()和.show()只是在它們被調用時改變CSS，因爲.fadeIn()會在指定的毫秒數內改變CSS數千次。

http://jsfiddle.net/vKLNe/8/