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

Question

Я пытаюсь добавить и удалить 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(); 
    } 
    }); 
}); 

Answer 1

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

$('.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'); 
    } 

    }); 

Answer 2

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

$('.card-header.swipeable').on('click', function(e) { 
    $(this).toggleClass('swipe-left'); 
    e.preventDefault(); 
})