所以基本上我刚刚开始使用 jQuery 和 JS,但遇到了一个问题。
我有一个小菜单,当用户单击其中一个链接时,内容会向下滑动。如果已经有一个盒子打开,它就会向上滑动。
我的问题是,当您单击同一个链接再次关闭它时,它会向上滑动,但由于 jQuery 代码告诉它再次向下滑动,所以它确实如此。这意味着一旦内容之一打开,您就永远无法关闭其中之一。
我的 jQuery 代码是:
jQuery(document).ready(function(){
jQuery(".radius5").hide();
jQuery("a#contact-btn").click(function() {
jQuery(".radius5").slideUp();
jQuery("div#contact").slideDown("slow");
});
jQuery("a#about-btn").click(function() {
jQuery(".radius5").slideUp();
jQuery("div#about").slideDown("slow");
});
jQuery("a#portfolio-btn").click(function() {
jQuery(".radius5").slideUp();
jQuery("div#portfolio").slideDown("slow-up");
});
});
和 HTML 代码(当然是简化的):
<a id="contact-btn" class="btn-slide" href="#">Contact</a>
<a id="about-btn" class="btn-slide" href="#">About</a>
<a id="portfolio-btn" class="btn-slide" href="#">Portfolio</a>
<div id="contact" class="radius5">Contact Us</div>
<div id="about" class="radius5">About Us</div>
<div id="portfolio" class="radius5">Our Portfolio</div>
我还有一个jsFiddle链接。
我确信这个问题很容易回答。我尝试过使用 addClass
和 removeClass
但似乎不太正确。有人可以帮忙吗?
问候,
汤姆·奥克利
最佳答案
您需要做的就是从 $(".radius5")
选择中删除当前元素,这样它就不会向上滑动。您还可以通过在一个事件处理程序中处理所有 click
事件来使代码更加紧凑:
$(function(){
//cache the `.radius5` selector so it doesn't have to be re-calculated in the event handler
var $radius5 = $(".radius5").hide();
//bind a `click` event handler to all three of your buttons, notice to select multiple items we just put a comma in between the selectors
$("#contact-btn, #about-btn, #portfolio-btn").click(function() {
//get the ID of the element to slideDown
var slide_down = "#" + this.id.replace('-btn', '');
//slideUp all but the current element
$radius5.not(slide_down).slideUp();
//slideDown the current element
$(slide_down).slideDown("slow");
});
});
这是一个演示:http://jsfiddle.net/ePRsz/5/
更新
我刚刚重新阅读了您的问题,如果您希望当前滑动的元素在再次单击其导航链接时向上滑动,您可以将 .slideDown()
更改为 。幻灯片切换()
:
$(function(){
var $radius5 = $(".radius5").hide();
$("#contact-btn, #about-btn, #portfolio-btn").click(function() {
var slide_down = "#" + this.id.replace('-btn', '');
$radius5.not(slide_down).slideUp();
$(slide_down).slideToggle("slow");
});
});
关于jQuery SlideDown 和 SlideUp 切换问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8694400/