2016-04-01 11 views
0

Ich verwende Toggle-Klasse für dd & dt es funktioniert gut, aber mein Problem ist, wenn Benutzer klicken Sie auf Seite Ich möchte diesen Toggle zu schließen. Wie erreiche ich das?Toggle schließen außerhalb klicken

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <script type="text/javascript"> 
    jQuery=$.noConflict(); 
    jQuery(document).ready(function() { 
     jQuery('.navigation dd').hide(); 

     jQuery('.navigation dt').click(function(){ 
       jQuery(this).next('dd').slideToggle('slow'); 
       jQuery(this).toggleClass('glace_navigationlayer-collapsed'); 


      }); 


    }); 
    </script> 
+1

'jQuery ('document'). Nicht (". Navigation dt "). Click (function() {})' Ist es das, was du fragst? Es sollte immer dann ausgeführt werden, wenn Sie auf etwas anderes als die Eröffnungsklasse klicken. – DBS

+0

@DBS Danke für die Antwort Ich werde überprüfen und lassen Sie wissen –

Antwort

0

Sie können auch versuchen - was DBS ist die richtige, (er in einem Kommentar geschrieben), imho.

//clicking on the body, closes the toggleitem 
jQuery(document.body).bind('click.closedd', function() { 
    jQuery('.navigation dd').hide(); 
}); 

// clicking on the toggle item, won't trigger the click on the body 
// that we set up above. 
jQuery('.navigation dd').bind('click.closedd', function(e) { 
    e.stopPropagation(); 
}); 
+0

Danke für die Antwort werde ich überprüfen und lassen Sie wissen –

+0

Während des Öffnens einer Seite zeigen Sie alle öffnen –

0

Sie müssen für Klicks auf den <body> hören und dann überprüfen, um sicherzustellen, dass das Ziel außerhalb der Navigationskomponente ist.

jQuery('body').on('click', function(evt) { 
    var $target = $(evt.target); 
    if (!$target.closest('.navigation').length) { 
    // code to collpase the nav menu 
    } 
}); 

würde ich auch empfehlen Ihr nav Code Refactoring trennen erweitern und reduzieren Funktionen zu verwenden, anstatt auf slideToggle und toggleClass zu verlassen.

Viel Glück!

+0

Vielen Dank für die Antwort werde ich überprüfen und Ihnen wissen –

0

Die Anforderungen sind nicht sehr sicher, aber Sie können versuchen, die oben genannten Ereignisse für mouseenter und mouseleave zu erreichen.
Wenn Sie jedoch die oben genannte Funktionalität nur beim Klicken implementieren müssen, müssen Sie das click -Ereignis an einen Container anschließen, der den gesamten HTML-Text abdeckt.

+0

Vielen Dank für die Antwort werde ich überprüfe und lass es dich wissen –

Verwandte Themen