깃털 라이트 라이트 박스 || 모바일 토글 클래스 문제

Question

모바일에서만 이상한 문제가 있습니다. click에 처음에 toggle이 번쩍입니다. 이는 처음 햄버거 메뉴 나 검색 아이콘과 상호 작용할 때 원하는 것입니다.

lightbox (FeatherLight)을 열고 닫은 후 원래의 햄버거/검색은 clicktoggle이 두 번 발동합니다.

처음에는 모바일 메뉴 및 검색 아이콘이 정상적으로 작동합니다. 그러나 FeatherLight와 상호 작용할 때 클래스를 두 번 토글하기 때문에 전환이 올바르게 작동하지 않습니다. 심지어 내 클릭 핸들러에 아무 쓸모가 event.preventDefault();을 추가했습니다. 누구든지 아이디어가 있습니까?

$('.cards__inner a').featherlight({ 
      targetAttr: 'href', 
      afterContent: function() { 
      $footer = $('section.lightbox-footer'); 
      $footer.insertAfter('.featherlight-content'); 
      } 
     }); 

그리고 내 이동 탐색 :

var $headerMenu = $('.header__menu'), 
    $navigation = $('.navigation'), 
    $navigationOverlay = $('.navigation__overlay'); 

    $headerMenu.on('click', function() { 
     event.stopPropagation(); 
     event.preventDefault(); 

     $('body').toggleClass('noscroll'); 
     $navigation.toggleClass('open'); 
     $navigationOverlay.toggleClass('open'); 
     $(this).toggleClass('open'); 

     // mobile wonkieness 
     height = $(window).height(); 
     $navigation.height(height + 100); 
     $navigationOverlay.height(height + 100); 
    }); 

    $navigationOverlay.on('click', function() { 
     $('body').removeClass('noscroll'); 

     $navigation.removeClass('open'); 
     $navigationOverlay.removeClass('open'); 
     $headerMenu.removeClass('open'); 
    }); 

    // Toggle search box 
    var $searchForm = $('#search-box'), 
     $searchLink = $('.search-link'); 

    $searchLink.on('click', function() { 
     $searchForm.toggleClass('open'); 
     $(this).toggleClass('open'); 
    }); 

심지어 event.stopImmediatePropagation();을 검토 한하지만 난 단순한 뭔가 빠진해야

여기에 라이트를 호출 내 JS입니다. 적어도 나는 그렇게 희망한다. Ive는 잠시 동안이 설정을 사용하고 FeatherLight가 사용 된 후에 만 ​​문제가 발생하기 시작했습니다.

의견이 있으십니까?

온라인으로 여기 볼 수 있습니다 도움을 http://dose.encryptdesigns.com/

감사합니다!

Answer 1

먼저 stopImmediatePropagation으로 전화하지 않습니다. 이렇게하면 문제가 완화되지만 featherlight가 열리고 닫히면 현재 바인딩 코드가 실행된다는 문제가 해결되지 않습니다. 어떻게 든 코드는 $('section.lightbox-footer')에 있어야합니다. insertAfter은 삽입되는 내용의 스크립트 태그를 실행합니다.