Jquery slideToggle(): Nur ein element anzeigen, wenn anderes gedrückt erstes slideUp

[Rocky007]

Hallo,
ich habe folgenden HTML Code:

<div class="navbar-inner-2nd">		<div class="container" style="width:950px">			<ul class="nav" style="float:left">								<li><a> | </a></i>								<li class="dropdown" style="text-align:center">					<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class=\"icon icon-darkgrey icon-list\"></i> Ansehen <i class="icon caret"></i></a>					<ul class="dropdown-menu pull-right n_p" style="overflow:auto">						<li><?php echo "<a href=""><i class=\"icon icon-darkgrey icon-list\"></i> FAQ ansehen</a>" ?></li>						<li><?php echo "<a href=""><i class=\"icon icon-darkgrey icon-list\"></i> Badword ansehen</a>" ?></li>						<li><?php echo "<a href=""><i class=\"icon icon-darkgrey icon-list\"></i> Kategorie ansehen</a>" ?></li>					</ul>				</li>								<li><a> | </a></i>								<li class="dropdown" style="text-align:center">					<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class=\"icon icon-darkgrey icon-edit\"></i> Editieren <i class="icon caret"></i></a>					<ul class="dropdown-menu pull-right n_p" style="overflow:auto">						<li><?php echo "<a href=''><i class=\"icon icon-darkgrey icon-edit\"></i> FAQ editieren</a>" ?></li>						<li><?php echo "<a href=''><i class=\"icon icon-darkgrey icon-edit\"></i> Badword editieren</a>" ?></li>						<li><?php echo "<a href=''><i class=\"icon icon-darkgrey icon-edit\"></i> Kategorie editieren</a>" ?></li>					</ul>				</li>								<li><a> | </a></i>								<li class="dropdown" style="text-align:center">					<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Eintragen <i class="icon caret"></i></a>					<ul class="dropdown-menu pull-right n_p" style="overflow:auto">						<li><?php echo "<a href=''><i class=\"icon icon-darkgrey icon-pencil\"></i> FAQ eintragen</a>" ?></li>						<li><?php echo "<a href=''><i class=\"icon icon-darkgrey icon-pencil\"></i> Badword eintragen</a>" ?></li>						<li><?php echo "<a href=''><i class=\"icon icon-darkgrey icon-pencil\"></i> Kategorie eintragen</a>" ?></li>					</ul>				</li>								<li><a> | </a></i>							</ul>		</div>	</div>

Dazu habe ich folgende Jquery Funktion:

$('.nav .dropdown').on('click', function() {
		$(this).find('.dropdown-menu').slideToggle("slow");
	});

Nun möchte ich, dass wenn ein "dropdown-link" geklickt wird und eines bereits slideDown ist, dass es slideUp() geht sodass nur immer eines slideDown() ist...
Wie könnte ich das realisieren?


Danke schonmal

 

[Banana_Jones]

Du könntest z.B. in der click-Funkion als aller erstes sämtliche .dropdown-menu, die sichtbar sind (':visible') wieder verstecken, und dann das aktuelle .dropdown-menu sliden.

 

[Rocky007]

Das Menu wird nur über Jquery und slideToggle gezeigt und nicht über css...
Wie könnte man das ohne CSS machen

 

[Banana_Jones]

Um ganz genau zu sein, geht es ohne CSS nicht, denn jQuery animiert beim slideUp/Down die Höhe des Elementes im style-Attribut (CSS!) bzw. setzt am Ende der Animation ein 'display: none'.

Außerdem habe ich in meiner Antwort von CSS überhaupt nichts geschrieben. Es gibt den jQuery-Selektor ':visible' mit dem du das momentan sichtbare .dropdown-menu wieder verstecken kannst, unabhängig davon, ob es das aktuell geklickte ist oder nicht.
Du könntest auch generell alle .dropdown-menu verstecken.

 

[Sempervivum]

Hallo Rocky,
informiere dich mal über siblings(), damit kannst Du die Nachbarelemente außer dem eigenen ermitteln und das slideUp() darauf anwenden.

 

[Rocky007]

Danke für eure Anregungen habe es nun geschafft.


ich habe folgenden HTML Code:

<div class="navbar-inner-2nd">
		<div class="container" style="width:950px">
			<ul class="nav" style="float:left">
				
				<li><a> | </a></li>
				
				<li class="dropdown" style="text-align:center">
					<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class=\"icon icon-darkgrey icon-list\"></i> Ansehen <i class="icon caret"></i></a>
					<ul class="dropdown-menu pull-right n_p" style="overflow:auto">
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=show&typ=faq&kategorie=all&kategorie_name=Alle'><i class=\"icon icon-darkgrey icon-list\"></i> FAQ ansehen</a>" ?></li>
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=show&typ=badword'><i class=\"icon icon-darkgrey icon-list\"></i> Badword ansehen</a>" ?></li>
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=show&typ=kategorie'><i class=\"icon icon-darkgrey icon-list\"></i> Kategorie ansehen</a>" ?></li>
					</ul>
				</li>
				
				<li><a> | </a></li>
				
				<li class="dropdown" style="text-align:center">
					<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class=\"icon icon-darkgrey icon-edit\"></i> Editieren <i class="icon caret"></i></a>
					<ul class="dropdown-menu pull-right n_p" style="overflow:auto">
						<li><?php echo "</i><a href='" .$_SERVER['PHP_SELF']. "?action=edit&typ=faq'><i class=\"icon icon-darkgrey icon-edit\"></i> FAQ editieren</a>" ?></li>
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=edit&typ=badword'><i class=\"icon icon-darkgrey icon-edit\"></i> Badword editieren</a>" ?></li>
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=edit&typ=kategorie'><i class=\"icon icon-darkgrey icon-edit\"></i> Kategorie editieren</a>" ?></li>
					</ul>
				</li>
				
				<li><a> | </a></li>
				
				<li class="dropdown" style="text-align:center">
					<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Eintragen <i class="icon caret"></i></a>
					<ul class="dropdown-menu pull-right n_p" style="overflow:auto">
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=insert&typ=faq'><i class=\"icon icon-darkgrey icon-pencil\"></i> FAQ eintragen</a>" ?></li>
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=insert&typ=badword'><i class=\"icon icon-darkgrey icon-pencil\"></i> Badword eintragen</a>" ?></li>
						<li><?php echo "<a href='" .$_SERVER['PHP_SELF']. "?action=insert&typ=kategorie'><i class=\"icon icon-darkgrey icon-pencil\"></i> Kategorie eintragen</a>" ?></li>
					</ul>
				</li>
				
				<li><a> | </a></li>
			</ul>
			
			<ul class="nav" style="float:right">
					<li><a href="http://www.html.de/">User</a></li>
			</ul>			
		</div>

Dafür verwende ich folgen Jquery Code:

$ = jQuery;
$(document).ready(function() {
	
	$('.dropdown').on('click', function() {
		$(this).siblings().find(".dropdown-menu").slideUp();
		$(this).find('.dropdown-menu').slideToggle("slow");
	});
	
	$(document).on('click', function () {
      $(this).find('.dropdown-menu').slideUp("slow");
    });
	
});

Wenn ich nun jedoch noch ein weiteres

<ul class="nav" style="float:right">
				<li class="dropdown">
					<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">NAME <i class="icon caret"></i></a>
					<ul class="dropdown-menu pull-right n_p" style="overflow:auto">
						<li><a href="./profil"><i class="icon icon-darkgrey icon-user"></i> Profil</a></li>
						<li><a href="./einstellungen"><i class="icon icon-darkgrey icon-wrench"></i> Einstellungen</a></li>
						<li class="divider"></li>
						<li><a href="javascript:void(0)" id="logout"><i class="icon icon-darkgrey icon-lock"></i> Logout</a></li>
					</ul>
				</li>
			</ul>

anstatt von

<ul class="nav" style="float:right">
					<li><a href="http://www.html.de/">User</a></li>
			</ul>

einsetzte, wird das nicht slideUp gemacht, wenn ein anderes .dropdown slideDown() ist..


Habt ihr eine idee?

Was könnte da falsch sein?

 

[Rocky007]

Post update

 

[Tronjer]

Ich habe mir jetzt lediglich das jQuery angeschaut und könnte mir vorstellen, dass die beiden Eventlistener kollidieren. So etwas lässt sich eigentlich auch ohne traversieren mit siblings() und find() schreiben. Gib einfach sämtlichen Elementen, die sliden sollen, die Klasse .dropdown-menu. Beim Klick werden erst alle geschlossen und anschließend das aktive Element aufgerollt. Also etwa so:

ungeprüft:

$('.dropdown-menu').on('click', function() {
    $('.dropdown'-menu).slideUp();
    $(this).slideDown();
});