Как заставить этот код работать для каждого клика? - PullRequest
Новая
       1

Как заставить этот код работать для каждого клика?

1 голос
/ 02 апреля 2012

У меня есть h3 блок, и при щелчке каждого блока я показываю связанный с ним раздел.Это на самом деле что-то вроде баянаЯ также дал иконку «drop» для тегов h3, это означает, что при открытии блока у h3 должен быть указатель, указывающий вниз, в то время как другие h3 должны иметь там выпадающие значки вправо.Я контролирую это поведение, используя backgroundPosition.Я использую условие видимого jQuery, чтобы увидеть, виден ли конкретный блок, затем назначить его иконке перетаскивания одну фоновую позицию, а остальной - другую.Работает нормально но только для первого клика.Это не работает для второго клика, Может кто-нибудь объяснить, почему, вот мой код: 

if($(this).next().is(':visible')) {
    $(this).css({'backgroundPosition':'0px 14px'});
}
else {
    $("h3").css({'backgroundPosition':'0px -11px'});
}

ОБНОВЛЕННЫЙ КОД: 

$("h3").click(function() {          
    $(".tabs").hide();
    $(this).next().show();

    if($(this).next().is(':visible')) {
        $(this).css({'backgroundPosition':'0px 14px'});
    } else {
        $("h3").css({'backgroundPosition':'0px -11px'});
    }
})

Ответы [ 6 ]

2 голосов
/ 03 апреля 2012

Если вы оберните весь блок в div, это может упростить обход.

Html: 

<div class="drop-block">
<h3>Click this</h3>
    <ul>
        <li>Drop</li>
        <li>it</li>
        <li>like</li>
        <li>it's</li>
        <li>hot</li>
   </ul>
</div>​

Jquery: 

var dropper = $('.drop-block'); 
$(dropper).find('h3').click(function(){ 
    $(this).toggleClass('active');
    $(dropper).find('ul').toggle();
});​

Пример

1 голос
/ 02 апреля 2012

Я верю, что вы ищете в прямом эфире

Так что это будет примерно так: 

$(element).live('click', function(){
    if($(this).next().is(':visible')) {
        $(this).css({'backgroundPosition':'0px 14px'});
    }
    else {
        $("h3").css({'backgroundPosition':'0px -11px'});
    }
}
0 голосов
/ 02 апреля 2012 
$(document).on('click', 'h3', function(e) {          
    $(".tabs").hide('slow'); 
    $(this).css({'backgroundPosition':'0px 14px'});

    if(!$(this).next().is(':visible'))
    {
        $("h3").css({'backgroundPosition':'0px -11px'});
        $(this).next().show('slow');
    }
});

Вы можете убрать 'slow' из отображения / скрытия, если анимация не требуется

Вот пример .

0 голосов
/ 02 апреля 2012

Похоже, вам нужно привязать события щелчка к элементам h3 и переключать видимость дочерних элементов: 

$(function(){
    $("h3").click(function(){
        $(this).next(".tabs").toggle();
    });
});

Пример разметки: 

<h3>Item 1</h3>
<div class="tabs">
    <h4>Option 1</h4>
    <h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
    <h4>Option 1</h4>
    <h4>Option 2</h4>
</div>

Вот jsFiddle для демонстрации.

0 голосов
/ 02 апреля 2012

Лучше сделать имя класса для каждой ситуации и легко обработать действие 

$('h3').on('click', function(){
   if($(this).hasClass('opened')) {
     $(this).removeClass('opened');
   }
   else {
      $(this).addClass('opened');
    }
}
0 голосов
/ 02 апреля 2012

Вместо того, чтобы редактировать их css, сделайте класс css «открытым» (или аналогичным), а затем добавьте / удалите класс по щелчку, чтобы открыть / закрыть.

Гораздо проще отладить, проверив наличие класса, чем проверить свойства css чего-либо в JS.

...