jQuery onClick не работает с основным элементом

Я пытаюсь добавить и удалить onclick класс из элемента.

Но моя функция не работает, потому что она добавляет класс, только если щелкнуть дочерние элементы, и удалить этот класс, только если щелкнуть родитель.

Я хочу переместить элемент .card-header.swipeable, чтобы отобразить элемент .swipe-actions, и снова щелкнуть, чтобы скрыть его.

JS FIDDLE

jQuery(document).ready(function($){
  //slide the contact
  $('.card-header.swipeable').on('click', function(event){
    event.preventDefault();
    $(this).addClass('swipe-left');
  });
  //close the contact
  $('.card-header.swipeable').on('click', function(event){
    if( $(event.target).is('.card-header.swipeable') ) { 
      $('.card-header.swipeable').removeClass('swipe-left');
      event.preventDefault();
    }
  });
});

javascript jquery css onclick addclass
person filippo90    schedule 10.09.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Проверьте этот код

$('.card-header.swipeable').on('click', function(e){
    e.preventDefault();

    if( $('.card-header.swipeable').hasClass('swipe-left') ) { 
      $('.card-header.swipeable').removeClass('swipe-left');
    }else{
        $(this).addClass('swipe-left');
    }

  });
person Vinod Murukesan    schedule 10.09.2015

arrow_upward
0
arrow_downward

Вы можете просто сделать это с помощью toggleClass:

$('.card-header.swipeable').on('click', function(e) {
    $(this).toggleClass('swipe-left');
    e.preventDefault();
})
person Iamzozo    schedule 10.09.2015
comment
Вау, отлично работает! есть способ заставить его переводить немного медленнее? - person filippo90; 10.09.2015