JQuery братьев и сестер / RemoveClass "активный" просто не будет работать - PullRequest
Новая
       1

JQuery братьев и сестер / RemoveClass "активный" просто не будет работать

1 голос
/ 13 июля 2011

Я пытался заставить этот скрипт переключения стрелок работать на моей странице. Я думаю, что скучаю по чему-то простому, но я просто не знаю, что это. Потратил 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>

Таким образом, стрелки вверх и вниз ВНУТРИ тега "href", и в теге H3 другое фоновое изображение зависит от идентификатора "tab". Я надеюсь, что это имеет смысл.

Заранее спасибо !!

Ответы [ 2 ]

2 голосов
/ 13 июля 2011

Проблема в том, что 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/

1 голос
/ 13 июля 2011

В скрипте есть две ошибки:

  1. Каждый элемент <a> является единственным дочерним элементом <h3>.Нет других <a> братьев и сестер.Вам нужно найти все остальные элементы <a> внутри заголовков аккордеона: 

    $(this).closest('.accordion').find('h3 a').removeClass("active");

  2. Установка стиля для элемента ($(this).css(...);) перезапишет любой другой стильопределения.Изменения фона после изменения класса (в этом случае удаление класса active) не окажут никакого влияния [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

...