我一直在尝试让这个箭头切换脚本在我的页面上工作。我想我错过了一些简单的东西,但我只是不知道它是什么。花了2个小时才弄清楚这个问题。
脚本:
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion a:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function()
{
$(this).next("p").slideDown("slow")
.siblings("p:visible").slideUp("slow");
});
$(".accordion a").click(function()
{
$(this).css({background:"url(images/arrowdown.gif) bottom right no-repeat"});
$(this).siblings("a").removeClass("active");
});
});
CSS:
.accordion h3 a {
padding:20px 0 0 190px;
display:block;
background:url(images/arrowup.gif) no-repeat bottom right; }
.accordion h3 a:hover { text-decoration:none; }
.accordion h3 a.active {
background:url(images/arrowdown.gif) no-repeat bottom right; }
然后是我的 HTML :
<div class="accordion">
<h3 id="tab1">
<a href="#">Title 1</a>
</h3>
<p>Description Title 1</p>
<h3 id="tab2">
<a href="#">Title 2</a>
</h3>
<p>Description Title 2</p>
<h3 id="tab3">
<a href="#">Title 3</a>
</h3>
<p>Description Title 3</p>
</div>
因此,向上和向下箭头位于“a href”标签内,并且 H3 标签中有不同的背景图像,具体取决于“tab”ID。我希望这是有道理的。
提前谢谢您!!
最佳答案
问题是 siblings
适用于同一父级下的元素。您的 a
链接不在同一父链接下,因为每个链接都包含在 h3
中。
所以我相信这就是你想要的
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion a:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function() {
$(this)
.addClass('active') //set the current as active
.siblings("h3") //find sibling h3 elements
.removeClass("active") // and remove the active from them
.end() // return selection to the current element
.next("p") // find the next p
.slideDown("slow") // and show it
.siblings("p:visible") // find the other visible p elements
.slideUp("slow"); // and hide them
$(this)
.find('a') // find a under current element
.addClass('active') // and add active class
.end() // return to current element
.siblings('h3') // find sibling h3 elements
.find('a') // find their a elements
.removeClass('active'); // and remove the active
});
});
关于jQuerysiblings/removeClass "active"不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6672443/