Jquery, kann das zuvor erstellte Attribut nicht aktualisieren

Question

Ich versuche gerade, am neuen Slider-Menü zu arbeiten, aber ich habe ein Problem mit Jquery.

Ich habe einen Link. Wenn ich auf klicke, benutze ich .css ('left', -230) und alles ist in Ordnung, aber wenn ich durch einen anderen angeklickten Link wie .css ('left', 0) nichts passieren will.

zeige ich Ihnen einige Code:

// 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'); 
}); 

Eine seltsame Sache in diesem Problem ist, dass ich dies in meiner Konsole haben:

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

Es scheint, dass der Code funktionieren gut, aber in meiner Seite Das linke Attribut ist immer -230px.

Jemand hat eine Idee?

Vielen Dank.

PS: Wie gefragt die JSfiddle, der mein Problem

reproduzieren

https://jsfiddle.net/w7Lknsxg/

Wenn Sie auf „Menu01“ Farbe zu rot, und wenn Sie klicken Sie auf „< =“ im Untermenü haben Sie die Ausführung in die Konsole aber die Farbe ändert sich nicht. Sie können sehen, die Klasse Navar-Nav bekommen neue Klasse "Toto" aber nicht verloren, wenn ich versuche, es im zweiten Fall zu entfernen.

Answer 1

Da die .go-back in der .nav-item verschachtelt ist, feuern Sie beide Event-Listener aufgrund von Event-Bubbling. Sie können dies mit event.stopPropagation(); innerhalb des Listeners auf dem untergeordneten Element stoppen. (Oder genauer gesagt, was Sie zielen nicht Subelemente enthalten)

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>