Problem mit Toggle Sidebar

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
hab ein kleines Problem.
Ich möchte per Button ein Bereich aus- und einblenden können. Dazu überprüfe ich beim klick auf den Button das Attribut data-state.
Aber es wird immer open ausgegeben auch wenn im Quellcode close steht.
Wo habe ich grad einen Denkfehler?
HTML:
<nav class="sidebar row col-sx-12 col-sm-2 col-md-2 col-lg-2" data-state="open">
	<button class="sidebar-toggle btn fa fa-arrow-left pull-right"></button>
	<ul class="sidebarmenu">
				<li><a class="active" href="#">About</a></li>
				<li><a href="#">Projects</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Guestbook</a></li>
			</ul>
</nav>

Javascript:
$(function(){
	$('.sidebar-toggle').click(function(){
		if($('.sidebar').data('state') === 'open'){
			$('.sidebar').attr('class', 'sidebar row');
			$('.sidebarmenu').css({display: 'none'});
			$('.sidebar').attr('data-state', 'close');
			$(this).attr('class', 'sidebar-toggle btn fa fa-arrow-right pull-right');
			console.log('open');
		}
		else {
			$('.sidebar').attr('class', 'sidebar row col-sx-12 col-sm-2 col-md-2 col-lg-2');
			$('.sidebarmenu').css({display: 'block'});
			$('.sidebar').attr('data-state', 'open');			
			$(this).attr('class', 'btn fa fa-arrow-left pull-right');	
			console.log('close');		
		}
	});
});
 
Hi,

wenn du mit jQuery auf ein data-Attribut zugreifen möchtest, muss das über die data-Eigenschaft erfolgen.

Ersetze an den entsprechenden Stellen
Code:
$('.sidebar').attr('data-state', 'WERT');
durch
Code:
$('.sidebar').data('state', 'WERT');
Ciao
Quaese
 

Neue Beiträge

Zurück