在另一個環境中包裝一個功能

Question

我正在研究兩個div，讓它們在頁面加載時隱藏起來，但是當單擊一個時，它們會分開放置。當其中一個被激活時，另一個被隱藏。

到目前爲止，我有

$('#div, #div1').hide(); { 
$("#div").click(function() { 
$("#div1").slideUp("slow", function() { 
// Animation complete. 
}); 
}); 

但我有麻煩了最初的一包裹內點擊功能。選秀名單正在調用這些div。

有人可以通過這個走過我嗎？我更喜歡一步一步的例子。我在編寫jQuery方面的經驗非常有限，並且非常感謝您的幫助。

這是我工作的頁面鏈接。

https://www.gdg.do/prod1/portal/portal.jsp?c=6696885&p=8296647&g=8297605

我想要做什麼，我想這兩個「組」區域隱藏在頁面加載。然後，一旦在下拉菜單中進行了選擇，相應的「組」就會滑落。當選擇另一個「組」時，第一個消失，新選擇的一個可見。

我希望更清楚。

Answer 1

var $sliderDivs = $('#div, #div1'); 
$sliderDivs.click(function(e){ 
    $(this).slideDown("slow"); 
    $sliderDivs.not(this).slideUp("slow", function() { 
     // Animation complete. 
    }); 
} 

所有jQuery的事件處理程序設置上下文（什麼this設爲），以引發該事件的元素。

之所以保存選擇爲$ -prefixed變量是，它更容易維護（僅更改必須要在一個地方製造），它是速度更快（jQuery的每次換一個選擇時間向DOM與$（））

編輯：反對我的判斷我給你做一個簡單的例子：在這裏你必須

http://codepen.io/tpblanke/pen/hrlgL

應該讓你。