Question

我只是想尝试新的滑块菜单，但我遇到了Jquery的问题。

我有一个链接。当我点击时，我使用 .css（'left'， - 230），一切都没问题，但当我想通过另一个点击的链接反转时，如 .css（'left'，0） 什么都没发生。

我给你看了一些代码：

// The open part "target.width()" = 230
$('.nav-item').on('click', function () {
    if( 0 < $(this).find('.navbar-nav__sub').length ) {
        var target = $('.navbar-nav');

        target.css('left', -target.width());
    }
});

// The close part
$('.navbar-nav__sub .go-back').on('click', function () {
    console.log('HERE');
    var target = $('.navbar-nav');

    console.log(target);
    console.log(target.css('left'));

    target.css('left', 0);

    console.log(target.css('left'));

    console.log('END');
});

这个问题的一个奇怪之处是我在我的控制台中有这个：

HERE
Object { 0: ul.navbar-nav.flex-column, length: 1, prevObject: […] }
-230px
0px
END

似乎代码运行良好但在我的页面中左侧属性始终为-230px。

有人有想法吗？

谢谢。

PS：正如那个重现我的问题的JSfiddle所说的那样

https://jsfiddle.net/w7Lknsxg/

如果单击“Menu01”颜色变为红色，当您在子菜单中单击“＆lt; =”时，您在控制台中执行但颜色不会更改。您可以看到类navbar-nav获取新类“toto”，但在第二种情况下尝试删除它时不会丢失。

Answer 1

因为.go-back嵌套在.nav-item中，所以由于事件冒泡而导致两个事件侦听器都被触发。您可以使用放置在子项上的侦听器中的event.stopPropagation();来停止此操作。（或者更具体地说明你的目标是不包括子元素）

var ftl = window.ftl || {};

ftl.navbar = {
  config: {
    targetName: '.nav',
    target: null,
  },

  init: function init() {
    this.config.target = $(this.config.targetName);

    $('.navbar-toggle').on('click', function () { ftl.navbar.toggle(); });

    $('.nav-item').on('click', function () {
      if( !ftl.navbar.config.target.hasClass('open') ) {
        ftl.navbar.open();
      }

      // test la présence d'un sous menu
      if( 0 < $(this).find('.navbar-nav__sub').length ) {
        var target = $('.navbar-nav');

        target.addClass('toto');
        target.css('color', 'red');
      }
    });

    $('.navbar-nav__sub .go-back').on('click', function (event) {
      event.stopPropagation();
      console.log('HERE');
      var target = $('.navbar-nav');

      console.log(target);
      console.log(target.hasClass('toto'));

      target.removeClass('toto');
      target.css('color', "green");

      console.log('END');
    })

  },

  open: function open() {
    this.config.target.addClass('open').one('transitionend', function () {
      ftl.navbar.config.target.addClass('opened');
    });
  },

  close: function close() {
    this.config.target.removeClass('opened')
      .removeClass('open');
  },

  toggle: function toggle() {
    if( this.config.target.hasClass('open') ) {
      this.close();
    } else {
      this.open();
    }
  }

}
    
$(document).ready(function() {
    ftl.navbar.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">

    <nav class="navbar" role="navigation">

        <div class="container-nav flex-column">

            <div class="navbar__header">
                <a href="#" class="no-style">
                    <i class="fa fa-comment-o fa-2x navbar__icon" aria-hidden="true"></i>
                    <span class="navbar__text"><strong class="text-primary">web</strong>tutu</span>
                </a>
            </div>

            <div class="navbar__divider"></div>

            <ul class="navbar-nav flex-column">

                <li id="nav-item--one" class="nav-item">
                    <a href="#nav-item--one">
                        <i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
                        <span class="navbar__text">Menu01</span>
                    </a>

                    <ul class="navbar-nav__sub">
                        <li><a href="#">link 01</a></li>
                        <li><a href="#">link 02</a></li>
                        <li><a class="go-back" href="#"> <= </a></li>
                    </ul>
                </li>

                <li id="nav-item--two" class="nav-item">
                    <a href="#nav-item--two">
                        <i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
                        <span class="navbar__text">Menu02</span>
                    </a>
                </li>

                <li id="nav-item--three" class="nav-item">
                    <a href="#nav-item--three">
                        <i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
                        <span class="navbar__text">Menu03</span>
                    </a>
                </li>
                
                <li class="mt-auto">
                    <i class="fa fa-angle-double-right fa-2x navbar-toggle" aria-hidden="true"></i>
                </li>

            </ul>
            
        </div>

        
    </nav>

</nav>

Jquery，无法更新先前创建的属性

1 个答案: