JQuery основного переключение работает только один путь

Question

Я создал некоторый быстрый код JQuery переключения:

$("#expander.closed").click(function(){ 
    console.log("opening"); 
    $("#expander").removeClass(); 
    $("#expander").addClass("open"); 
}); 
$("#expander.open").click(function(){ 
    console.log("closing"); 
    $("#expander").removeClass(); 
    $("#expander").addClass("closed"); 
}); 

Идея заключается в том, что каждый раз, когда вы нажимаете #expander клевантов класса между open и closed.

Однако по какой-то причине он работает только один раз, меняя с closed на open, а затем не идет дальше.

У меня нет подсказки, почему. Here's a jsFiddle.

Answer 1

Я думаю, что в самом начале, когда вы связываете события, .closed класса не существует, поэтому событие не становится связанным

Может быть, вы должны связать это событие с некоторыми другими критериями, или использовать live. который является устаревшим, хотя

Лучше всего было бы, как этот

$("#expander_parent").on('click', '#expander.closed', function(){ 
    // Do your stuff 
}) 

Answer 2

Просто связать его с помощью идентификаторов и переключать классы с помощью .toggleClass

$("#expander").click(function(){ 
    $(this).toggleClass('open closed'); 
}); 

FIDDLE

, если вам нужно сделать другие функции, в зависимости от того, какой класс у вас есть, вы можете проверить это как

$("#expander").click(function(){ 
    var $this = $(this); 
    $this.toggleClass('open closed'); 
    if($this.hasClass('open')){ 
     // do your open code 
    }else{ 
     // do your close code 
    } 
}); 

FIDDLE

Answer 3

Вы можете сделать это и добавить другие ваши сопутствующие операции в пределах если/других условий

HTML:

<div id="expander" class="closed">Click Me</div> 

CSS:

.closed { 
    background-color: red; 
} 

.open { 
    background-color: blue; 
} 

Javascript:

$("#expander.closed").click(function(){ 
    if ($('#expander').attr('class') === 'closed') { 
      $('#expander').attr('class', 'open'); 

      // Add other related functions here 
    } else { 
     $('#expander').attr('class', 'closed'); 

     // Add other related functions here 
    }  
}); 

http://jsfiddle.net/mCDwy/1/