-2
我想學習如何使用jQuery /動畫和我卡住了。當我點擊#menu1切換顯示的時候,但是當我點擊#menu2時,它只覆蓋#menu1。Jquery multiple toggle
我的目標是使#menu2切換,並在同一時間#menu1消失,而不是隻覆蓋它。
感謝社區的指導。
**JQUERY**
<script>
$(document).ready(function(){
$("#menu1").click(function(){
$("#Accueil").animate({width: 'toggle'});
});
});
</script>
<script>
$(document).ready(function(){
$("#menu2").click(function(){
$("#Events").animate({width: 'toggle'});
});
});
</script>
**HTML CODE**
<div id="body">
<div id="Accueil">
</div>
<div id="Events">
</div>
<div id="MenuBar">
<div id="menu1">
</div>
<div id="menu2">
</div>
</div>
</div>
**CSS**
#Accueil
background-color: brown;
display: none;
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 100%;
margin-left: 30%;
border-radius: 3px;
#Events
background-color: purple;
display: none;
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 100%;
margin-left: 30%;
border-radius: 3px;
這就是所謂的accordion..and你應該遵循一個更好的HTML結構爲...查看我的回答 –
好吧..讓我告訴你一些東西.. 1:只使用一個$ (document).ready(),並把所有的代碼放在裏面..第二個沒有寬度的世界:'toggle'..你可以使用.toggle()或fadeToggle()或者slideToggle();或者你可以通過使用toggleClass() –
爲jQuery初學者切換CSS類,我強烈推薦https://www.youtube.com/watch?v=VZBkc4qS2IE&list=PL6B08BAA57B5C7810&index=36好運:) –