javascript - Jquery，无法更新以前创建的属性

Question

我只是想在新的 slider 菜单上工作，但我在使用 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

看起来代码运行良好，但在我的页面中，left 属性始终为 -230px。

有人有想法吗？

谢谢。

PS:正如重现我问题的 JSfiddle 所问

https://jsfiddle.net/w7Lknsxg/

如果您单击“Menu01”，颜色变为红色，当您单击子菜单中的“<=”时，您会在控制台中执行，但颜色不会改变。 您可以看到类 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>