jQuery切換Divs

我有一個小問題實現一些jQuery到我正在做的頁面。jQuery切換Divs

我已經有一半的時間讓它做我想做的事，但我無法擺脫最後一部分的困擾。儘管我已經使用jQuery片段了一段時間，但在編寫自己的代碼時，我還是很新的。

基本上我想要默認隱藏的4個div通過點擊相關鏈接打開，但是任何時候只能顯示一個Div，所以如果Div1已經打開，點擊Div2按鈕關閉Div1並且打開Div2。

此外還有第5個按鈕，打開Div1是否Div是打開的，或者如果有任何Div打開，則關閉打開的Div。

我一直在看這些網頁的幫助，但沒有什麼是正是我所追求的：

http://css-tricks.com/forums/discussion/16451/.slidetoggle-one-div-a-time-problems-please-help/p1

www.randomsnippets.com/2011/04/10/how-to-隱藏秀，或撥動，你-DIV與 - jQuery的/

webdesignerwall.com/tutorials/jquery-tutorials-for-designers

目前，我做了它，這樣的div出現在一個按鈕上單擊，但就是這些，我無法從這些工具中制定切換邏輯e例子在我的代碼上工作。

我已經設置了的jsfiddle這裏：提前

來源

2012-05-23 Spitfire

你只需隱藏所有匹配'$（'。toggle-content'）'的DIVs' – Snuffleupagus

你接近，但有一個更清潔的方法：

http://jsfiddle.net/jbabey/vx6qu/3/

$('#toggle-image').on('click', function() { 
    if ($('.toggled').length === 0) { 
     // none are open, open the first 
     $('.toggle-content').eq(0).slideToggle().addClass('toggled'); 
    } else { 
     // one is open, hide it 
     $('.toggled').slideToggle().removeClass('toggled'); 
    } 
}); 

$('li > a').on('click', function() { 
    // extract the number 
    var num = parseInt(this.id.replace('toggle-', ''), 10); 

    // cancel the event if they clicked the link that is already open 
    if ($('.toggle-content').eq(num - 1).hasClass('toggled')) { 
     return false;  
    } 

    // hide the old one 
    $('.toggled').slideToggle().removeClass('toggled'); 

    // show the new one 
    $('.toggle-content').eq(num - 1).slideToggle().addClass('toggled'); 
});

來源

2012-05-23 14:25:38 jbabey

非常感謝你的解決方案。特別是jbabey和Bergi，非常感謝，這是我第一次發佈在Stackoverflow上，並對答案的速度和質量感到驚訝。 – Spitfire

@Spitfire答案的質量將體現出問題的質量和努力:) – jbabey

解決方案 http://jsfiddle.net/vx6qu/2/

謝謝很簡單：

密切的一切，不論是哪一個是開放
開放只有你需要的一個

var current = null; 
var all = $(".togglediv"); 

function onClickOne() { 
    all.hide(); 
    current = $("#one").show(); 
} 
function onClickTwo() { 
    all.hide(); 
    current = $("#two").show(); 
} 
... 

function onClickSpecial() { 
    if (current) { 
     all.hide(); 
     current = null; 
    } else 
     current = $("#one").show(); 
}

來源

2012-05-23 14:14:20 Bergi

我想你正在尋找的是「隱藏」的選擇，例如：

if(jqueryObject.is(':hidden')) { 
    // it's hidden 
} else { 
    // it's not 
}

這也適用於爲（ '：可見'）

來源

2012-05-23 14:15:25 Eva

<div id='div1' style='display:none;'>Div 1</div> 
<div id='div2' style='display:none;'>Div 2</div> 
<div id='div3' style='display:none;'>Div 3</div> 
<div id='div4' style='display:none;'>Div 4</div> 

<a href='showDiv(1);'>Show Div 1</a> 
<a href='showDiv(2);'>Show Div 2</a> 
<a href='showDiv(3);'>Show Div 3</a> 
<a href='showDiv(4);'>Show Div 4</a> 

<script> 
var showDiv = function(n) { 
    var i; 
    for (i = 1; i < 5; i++) { 
     if (i == n) 
      $('#div' + i).show(); 
     else 
      $('#div' + i).hide(); 
    }  
} 
</script>

來源

2012-05-23 14:17:04

回答

相關問題