Question

我一直试图让这个箭头切换脚本在我的页面上工作。我想我会想念一些简单但我不知道它是什么。花了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>

所以up＆amp;向下箭头是INSIDE中的“a href”标签，H3标签中有不同的背景图像取决于“标签”ID。我希望能够理解。

提前谢谢!!

Answer 1

问题是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
    });

});

http://jsfiddle.net/gaby/NSvQB/

演示

Answer 2

脚本中有两个错误：

每个<a>元素都是<h3>元素的唯一子元素。没有其他<a>兄弟姐妹。你想要的是找到手风琴标题内的所有其他<a>元素：
```
$(this).closest('.accordion').find('h3 a').removeClass("active");
```
在元素（$(this).css(...);）上设置样式将覆盖任何其他样式定义。稍后通过更改类（在这种情况下，删除类active）will not have any effect ^[demo]更改后台。因此，不应直接设置样式，而应设置active类：
```
$(this).addClass('active');
```

工作DEMO

更新：您还可以将所有内容放入h3点击事件处理程序，甚至将active类添加到其中，从而简化整个代码。

JavaScript的：

$(".accordion h3").click(function() {

    $(this).siblings().removeClass("active");
    $(this).addClass('active');

    $(this).next("p").slideDown("slow")
           .siblings("p:visible").slideUp("slow");

});

CSS（更改部分）：

.accordion h3.active a {
    background:red; 
}

DEMO 2

jQuery兄弟/ removeClass“活跃”只是不会工作

2 个答案: