我正在使用Jquery的slideToggle()來打開和關閉我的主菜單。 slideToggle()完美地工作。使用JQuery打開/關閉多個Divider slideToggle()
我需要做的是得到slideToggle關閉一個div時打開一個不同的。我嘗試了很多不同的方法來達到這個目標,但我一直沒能做到。
我發現計算器以下建議:
uses the id of the tag to trigger slideToggle()
我找到了這一建議的是,每次我點擊每個菜單項的頁面跳轉到頂部(就像它被重新加載)和我不喜歡那樣。
我也發現這個代碼點點:
,我打算給第三個框添加到小提琴,看看發生了什麼事,但它並沒有以同樣的方式工作的第2盒做了,我無法弄清楚爲什麼。
這是我的HTML看起來像:
<div class="menu-item-1">
<a href="#">Recovery</a>
</div>
<div class="menu-item-2">
<a href="#">Forensics</a>
</div>
<div class="menu-item-3">
<a href="#">Erasure</a>
</div>
<div class="menu-item-4">
<a href="#">Training</a>
</div>
<div class="menu-item-5">
<a href="#">Products</a>
</div>
這是我的JavaScript是什麼樣子:
$(".menu-item-1").click(function() {
$(".recovery-bg").slideToggle("fast", "easeOutBack");
});
$(".menu-item-2").click(function() {
$(".forensic-bg").slideToggle();
});
$(".menu-item-3").click(function() {
$(".erasure-bg").slideToggle();
});
$(".menu-item-4").click(function() {
$(".training-bg").slideToggle();
});
$(".menu-item-5").click(function() {
$(".product-bg").slideToggle();
});
這裏是的div的HTML代碼的slideToggle():
<!--Expanding Recovery Menu-->
<div class="recovery-bg arrow_box_recovery toggle hidden-phone">
<div class="container expand">
<div class="row">
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Data <br/> Recovery</p></a>
</div>
</div>
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Raid <br/> Recovery</p></a>
</div>
</div>
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Forensic <br/> Data Recovery</p></a>
</div>
</div>
<div class="span2 offset1">
<div class="menu-item">
<a href=""><p>Tape <br/> Recovery</p></a>
</div>
</div>
</div>
</div>
</div>
<!--/Expanding Recovery Menu-->
我經歷了一些其他教程,但在他們中我注意到有些人沒有href
在他們的標籤,我想避免這樣的東西,如果我可以。
如果任何人都可以提供幫助,那就太好了。
哪裏是打開/關閉元素,如'恢復-bg'標記 –
我添加了滑動Toggle()的div的html。在我的CSS中,我剛剛設置.recovery-bg顯示沒有。當你點擊它是可見的。 – fnk
試試這個:http://jsfiddle.net/u7Y2r/189/ – ThermalCube