Div mit toggle ein- und ausblenden - wie automatisch ausblenden?

U

Utzi

Grünschnabel
Hallo zusammen,
ich habe das Thema zwar schon einmal im Forum gefunden, allerdings keine Antwort auf meine Frage. Deshalb bitte ich euch um Hilfe:
Ich habe auf einer Webseite eine Unternavigattion eingefügt, bei der sich durch Klick auf den Navi-Punkt mit dem Befehl "Toggle" ein Div öffnet in dem die Unterpunkte erscheinen. Leider bleibt das Div jedoch so lange stehen, bis man wieder auf den Navipunkt klickt...es kann also sein, dass irgendwann für jeden Navipunkt ein Div geöffnet ist - ist natürlich nicht Sinn der Sache.
Gibt es eine Möglichkeit, das Div wieder zu schließen, sobald ein anderer Punkt aufgerufen wird bzw. noch lieber, sobald man mit der Maus das Div verlässt? Hättet ihr hier eine Lösung für mich? Ich wäre euch sehr dankbar!

Mein Script:
Javascript: 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function toggleDiv(element){ 
 if(document.getElementById(element).style.display == 'none') 
  document.getElementById(element).style.display = 'block'; 
 else
       document.getElementById(element).style.display = 'none'; 
} 
//--> 
</script>
und

HTML: 
<a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; ">
<img src="http://www.tutorials.de/images/navi/unternehmen.jpg" name="unternehmen" width="131" height="33" border="0" id="unternehmen" onMouseOver="MM_swapImage('unternehmen','','images/navi/unternehmen_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
 
Zuletzt bearbeitet von einem Moderator:
Hallo,
du könntest dies natürlich über einen Hover realisieren oder eben überprüfen ob in der Dom des Menüs ein weiteres Element display:block besitzt.
Leider habe ich mit traditionellem JS so meine Probleme und könnte dir hier eher mit jQuery weiterhelfen.

Viele Grüße
 
Hal Jan-Frederik,
danke für deine Antwort. Habe mit JQuery noch nie gearbeitet. Könntest du mir hier ein paar Tips geben, wie ich meinen Wunsch realisieren könnte?
Gruß
Ützi
 
Hallo Ützi,

hab grad zufällig so etwas gemacht ;) Hier ein minimalistisches Beispiel...

HTML-Code:
HTML: 
<div class="menu">
    <ul>
        <li>
            <a href="#">Menu 1</a>
            <ul class="submenu">
                <li><a href="#">Submenu 1.1</a></li>
                <li><a href="#">Submenu 1.2</a></li>
                <li><a href="#">Submenu 1.3</a></li>
            </ul>                     
        </li>
    </ul>
</div>

JQuery:
HTML: 
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $('.submenu').hide();
            $('.menu > ul > li > a').click(function() {
                $(this).next('ul').slideToggle();
            });
        });
        //]]>
        </script>

Die JQuery Datei musst du dir am besten auf der offiziellen Seite besorgen und dementsprechend in dein Projekt einbinden (hier "js/jquery-1.9.1.js". Das Hiding für das Submenu kannst du auch via CSS über display: none; setzen, wie es einem beliebt...

Grüße Cappaja
 
Also wenn du kein Bock auf jQuery hast kannst es auch so ungefähr lösen:

Javascript:
Code: 
function toggle(menuePunkt, methode) {
       if(methode == "ein") {
           document.getElementById(menuePunkt).style.display = 'block';
       }

       if(methode == "aus") {
           document.getElementById(menuePunkt).style.display = 'none';
       }
}
So könntest du das Ganze dann in HTML benutzen .. ist nur nen Beispiel mit nen par div'
HTML:

Code: 
 <div onclick="toggle('DeinDivName1', 'ein');" onmouseout="toggle('DeinDivName1', 'aus');">
 <div id="DeinDivName1">hier dann die menüpunkte rein die sich aufklappen</div>
 </div>
 <div onclick="toggle('DeinDivName2', 'ein');" onmouseout="toggle('DeinDivName2', 'aus');">
 <div id="DeinDivName2">hier dann die menüpunkte rein die sich aufklappen </div>
 </div>
Wenn dir was unklar ist frag einfach... achso ist nicht getestet nur kurz runter getippt (keine Garantie ob kein Fehler drin ist) (;
MfG Lion
 
Zuletzt bearbeitet:
Hallo,
ich benötige kurzfristig auch mal so ein aufklappbares div, weil ich viel (nebensächliche) Inhalte habe, die erst auf Wunsch/Klick kommen sollen.

Ich habe gesucht und die gefundenen Codeschnipsel schnell formlos in ein HTML-Dokument getan... nun funktionieren aber die Beispiele (zwei) nicht.

Das erste ist was, was mit den verlinkten jQuery-Paket funktionieren sollte (die Linkschreibweise stimmt doch oder?!) und das zweite ist das von hier aus dem Thread (das braucht ja gar keine verlinkte Bibliothek dazu, oder?!).

Wie mach ich also dass es funktionert?
HTML: 
<--! Das erste Beispiel -->
<style>
.info-div{
  width: 750px;
  height: 100px;
  background: red;
  color: white;
  display: none;
}
</style>



<script src="http://code.jquery.com/jquery-latest.min.js"
  type="text/javascript"></script>
<a href="javascript:void(0)" id="wd-click">Extras einblenden/ausblenden</a>

<div class="info-div" id="wd-info">THIS IS THE TOGGLE DIV</div>

<script>
jQuery.noConflict()
jQuery(document).ready(function(){
  (function($){
   $('#wd-click').click(function(){
     $('#wd-info').slideToggle();
  });
  })(jQuery);
});
</script>


<--! Das zweite Beispiel -->
<div onclick="toggle('DeinDivName1', 'ein');" onmouseout="toggle('DeinDivName1', 'aus');">
<div id="DeinDivName1">hier dann die menüpunkte rein die sich aufklappen</div>
</div>

<script>
function toggle(menuePunkt, methode) {
  if(methode == "ein") {
  document.getElementById(menuePunkt).style.display = 'block';
  }
  if(methode == "aus") {
  document.getElementById(menuePunkt).style.display = 'none';
  }
}</script>
 
Hi,

du willst das DIV mit der ID info-div sliden lassen. Damit muss das Element, auf dem die slideToggle-Methode ausgeführt wird diese ID als Selektor erhalten.
Javascript: 
jQuery(document).ready(function(){
    (function($){
        $('#wd-click').click(function(evt){
            evt.preventDefault();
            $('#wd-info').slideToggle();
        });
    })(jQuery);
});
Desweiteren kannst du dir die javascript-Anweisung im href-Attribut ersparen und stattdessen innerhalb des Eventhandlers mit preventDefault das Standardverhalten unterbinden.

Ciao
Quaese
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück