羽毛灯箱 ||移动切换类问题答案

【问题标题】：FeatherLight Lightbox || Mobile Toggle Class Issues羽毛灯箱 ||移动切换类问题
【发布时间】：2017-09-06 16:59:49
【问题描述】：

我只在移动设备上遇到了一个奇怪的问题。在click 上，toggle 最初会触发一次，这是我第一次与汉堡菜单或搜索图标交互时想要的。

一旦lightbox (FeatherLight) 打开然后关闭，原始汉堡包/搜索是click toggle 触发两次。

移动菜单和搜索图标最初可以正常工作。但是当我与 FeatherLight 交互时，切换无法正常工作，因为它切换了两次类。我什至在我的点击处理程序中添加了event.preventDefault();，但无济于事。有人有什么想法吗？

这是我的 JS 调用灯箱：

$( '.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();，但我一定错过了一些简单的东西。至少我希望如此。我已经使用此设置有一段时间了，只是在使用 FeatherLight 后才开始出现问题。

有什么想法吗？

您可以在这里在线查看：http://dose.encryptdesigns.com/

感谢您的帮助！

【问题讨论】：

标签： jquery toggle featherlight.js

【解决方案1】：

首先，你没有打电话给stopImmediatePropagation。这将缓解问题，但不会解决您的绑定代码当前在打开-然后-关闭时执行的问题。看起来该代码必须以某种方式在$( 'section.lightbox-footer' )中； insertAfter 将执行插入内容的脚本标签。

【讨论】：