jQuery toggle-Kinder von div

Habe ich folgenden HTML-code:

<div class="dim">
    Menu
        <div class='hidden'>submenu1</div>
        <div class='hidden'>submenu2</div>
</div>
<div class="dim">
    Menu2
        <div class='hidden'>submenu3</div>
        <div class='hidden'>submenu4</div>
</div>

Klasse hidden hat display:none

Ich versuche, den Knebel zu arbeiten, wenn ich auf den word-Menü oder menu2

InformationsquelleAutor Or Weinberger | 2011-12-27

  1. 10
    $('.dim').click(function(){
    $('.hidden', this).toggle(); //p00f
});

    Fiddle: http://jsfiddle.net/maniator/V4X4t/

    Update

    Überprüft dim element geklickt:

    $('.dim').click(function(event){

    var isDim = $(event.target).is('.dim');
    if(isDim){ //make sure I am a dim element
        $('.hidden', this).toggle(); //p00f
    }

});

    Fiddle: http://jsfiddle.net/maniator/V4X4t/5/

    sorry, ich hatte einen Fehler in meinem post, den ich gerade korrigiert. können Sie haben einen Blick?
    Der code oben (nach meiner Bearbeitung) arbeiten mit Ihrem aktualisierten HTML.
    oder Neal, ist es möglich, Umschalten() in einer Weise, dass Sie nicht entfernen Sie das Klasse, aber entfernen Sie einfach das display:none-Attribut?
    bitte nicht Bearbeiten zu Unrecht.....
    Oh hey, du bist der Kerl mit dem langen Namen auf meta -- +1 🙂

    InformationsquelleAutor Neal

  2. 3
    $('.dim').on('click', function () {
    //$(this).children('.hidden').toggleClass('.hidden');//as-per AndreasAL's suggestion
    $(this).children('.hidden').toggle();
});

$('.hidden').on('click', function (event) {
    event.stopPropagation();
});

    Hier ist eine demo: http://jsfiddle.net/76uTr/

    Dies zeigt/verbirgt die .hidden Elemente, wenn Sie auf eine .dim element, sondern es auch ermöglicht es Ihnen, klicken Sie auf einen .hidden element und nicht Umschalten, es ist die Sichtbarkeit.

    Beachten Sie, dass ich verwendet .children() statt .find() die nur wählen Sie direkte Nachkommen des root-Elements (.dim).

    Beachten Sie auch, dass .on() ist neu in jQuery 1.7 und in diesem Fall ist der gleiche wie .bind().

    UPDATE

    Mit event.stopPropagation() können wir es uns erlauben, nest Elemente und nicht lassen die Ereignisse bubble-up und trigger mehrerer event-Handler:

    $('.dim').on('click', function (event) {
    event.stopPropagation();
    $(this).children('.hidden').toggle();
});

$('.parent').on('click', function () {
    $(this).children('.dim').toggle();
});

$('.hidden').on('click', function (event) {
    event.stopPropagation();
});

    Hier ist eine demo: http://jsfiddle.net/76uTr/1/

    Hier die .parent element wird davon ausgegangen, dass die direkte Muttergesellschaft der .dim Elemente.

    schön mit den mehr bobbling fangen. Aber der richtige Weg wird sein, schalten Sie die Klasse, nicht die css.
    Siehe mein update ^_^ mit .is

    InformationsquelleAutor Jasper

  3. 1

    Befestigen Sie einfach einen click-Ereignishandler, und überprüfen Sie, ob das aktuelle element ist die eins, auf die geklickt wurde:

    $('.dim').click(function(e)
{
    if (e.target == this)
    {
        $(this).children().toggle();
    }
});

    Hier das fiddle: http://jsfiddle.net/V4X4t/6/

    InformationsquelleAutor Joseph Silber

  4. 0

    werfen Sie einen Blick auf diese tutorial, das kann Ihnen eine Idee geben,

    InformationsquelleAutor T I

  5. 0

    Anlegen Anker auf Menu und Menu2 

    <div class="dim">
    <a href="#" >Menu</a>
        <div class='hidden'>submenu1</div>
        <div class='hidden'>submenu2</div>
</div>
<div class="dim">
    <a href="#" >Menu2</a>
        <div class='hidden'>submenu3</div>
        <div class='hidden'>submenu4</div>
</div>

    und Skript:

    $(".dim > a").click( function ( e ){ 
   e.preventDefault() //prevent default action - hash doesn't appear in url
   $( this ).parent().find( "div" ).toggleClass( "hidden" );
});

    Beim klicken auf jeden link im Untermenü der Zugehörigkeit zu wird es erscheinen oder verschwinden

    Live-demo: http://jsfiddle.net/ZxwpJ/

    InformationsquelleAutor abuduba

Schreibe einen Kommentar