Question

我只在手机上遇到一个奇怪的问题。在click上，toggle最初会触发一次，这是我第一次与汉堡菜单或搜索图标进行交互时所需的内容。

打开lightbox（羽毛光）然后关闭后，原始汉堡/搜索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/

感谢您的帮助！

Answer 1

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

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

1 个答案: