Блог

У меня есть скрипт панели переключения в jQuery, посредством которого мой контент расширяется и сворачивается, когда я нажимаю на элемент h2.

Проблема в том, что у меня есть поля ввода в этом элементе h2, которые возникают, когда я пытаюсь что-то отредактировать с помощью jEditable. Я хотел бы найти способ, чтобы при нажатии на это поле ввода я не получал событие щелчка.

Я предполагаю каким-то образом использовать :not метод селектора, но я перепробовал кучу итераций безрезультатно.

код

     //toggle panel content
    $(".panelcollapsed h2").click(function(){
        $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
    });
  

Вы могли бы проверить, возникло ли событие на input элементе, и проигнорировать его, если это произошло:

 $(".panelcollapsed h2").click(function(e){
    if (e.target.tagName.toLowerCase() === 'input') {
        return;
    }

    $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
});
  

Это проверяет tagName of e.target , элемент, в котором возникло событие, чтобы увидеть, совпадает ли оно с input . Если это так, return завершите работу с обработчиком событий.

Вам нужно проверить event.target :

 //toggle panel content
$(".panelcollapsed h2").click(function(e){
    if ($(e.target).is('h2'))
       $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
});
  

Не совсем уверен, как выглядит ваш DOM, поэтому просто снимаю в темноте. Возможно, использование e.stopPropagation() в функции щелчка ввода могло бы помочь?

при вводе внутри тега h2 вы можете добавить event.stopPropagation() на его onclick.

 $('#inputInsideH2').click(function(event){
   event.stopPropagation();
   $(this).focus();
};
  

event.stopPropagation() остановит распространение события click.