Jquery、以前に作成された属性を更新できません。

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」色が赤に変わり、あなたはをクリックすると、「<は=」サブメニューで、あなたが実行中を持っていますコンソールでも色は変わらない。 クラスnavbar-navは新しいクラス "toto"を取得できますが、2番目のケースで削除しようとすると失われることはありません。

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>