Ich möchte eine grundlegende Umschaltliste erstellen. Wenn Sie auf einen Elementtitel klicken, wird dessen Inhalt nach unten und der Inhalt aller anderen Elemente nach oben verschoben.

Der folgende Code funktioniert, aber es gibt ein Problem: Wenn ich mehrmals auf ein Element klicke, wird es so oft nach oben und unten verschoben, wie es angeklickt wird.

Gibt es eine Möglichkeit, es zu verbessern, sodass Sie es auch nur einmal verschieben können, wenn Sie mehrmals auf dasselbe Element klicken.

JQuery:

$(".title").click(function(e){
    e.preventDefault();
    $('.item').removeClass("active");
    $(this).parent().addClass("active");
    $('p').slideUp();
    $(this).next().slideDown();
});

HTML:

<div class="wrap">
    <div class="item">
        <div class="title">title1</div>
        <p>content</p>
    </div>
    <div class="item">
        <div class="title">title2</div>
        <p>content</p>
    </div>
</div>

Sehen Sie sich die Demo hier an. Wenn Sie mehrmals auf den Titel klicken, sehen Sie Folgendes:

JSFiddle: http://jsfiddle.net/a7H27/

2
user1251698 8 Dez. 2013 im 21:26

5 Antworten

Beste Antwort

Das .stop() löscht die Animationen, die sich für das jeweilige Element in der Warteschlange befinden. Damit die unnötigen Klicks ignoriert werden. Bitte lesen Sie dies, um mehr über .stop () zu erfahren

Versuche dies,

$(".title").click(function(e){
    e.preventDefault();
    $('.item').removeClass("active");
    $(this).parent().addClass("active");
    $('p').slideUp();
    $(this).next().stop().slideDown();
});

DEMO

3
Rajaprabhu Aravindasamy 8 Dez. 2013 im 17:32

Ich würde wahrscheinlich eine einfache if-Anweisung verwenden, um zu testen, ob der Elternteil über die aktive Klasse verfügt. Dies hat den zusätzlichen Vorteil, dass offene Fenster optional reduziert werden können, wenn Sie ...

Arbeitsbeispiel

$(".title").click(function (e) {
    if (!$(this).parent().hasClass('active')) {
        e.preventDefault();
        $('.item').removeClass("active");
        $(this).parent().addClass("active");
        $('p').slideUp();
        $(this).next().slideDown();
    } else { //optionally closes open panes, remove if desired
        $('.item').removeClass("active");
        $('p').slideUp();
    }
});
2
apaul 8 Dez. 2013 im 17:41

Klickereignis abbrechen, wenn das Element animiert ist:

DEMO

$(".title").click(function(e){
    if($('.item, p').is(':animated')) return;
    e.preventDefault();
    $('.item').removeClass("active");
    $(this).parent().addClass("active");
    $('p').slideUp();
    $(this).next().slideDown();
});
2
A. Wolff 8 Dez. 2013 im 17:46

Ich empfehle nicht, .stop () zu verwenden, da dadurch die Animationen sofort gestoppt werden und beim zweiten Klicken eine unvollendete Animation verbleibt.

Ich empfehle zu überprüfen, ob die .item eine .active Klasse hat, und wenn dies nicht der Fall ist, animieren Sie den Absatz wie folgt.

JSFiddle - Hier

$(".title").click(function(e){
    e.preventDefault();
    //$('.item').removeClass("active");
    //$(this).parent().addClass("active");
    //$('p').slideUp();
    //$(this).next().slideDown();


    // Track which item we're referring to
    var item = $(this).parent('.item');
    // If item isn't active
    if(!item.hasClass('active')){
        // Remove all active classes on .item
        $('.item').removeClass('active');
        // Add class to clicked .item
        item.addClass('active');
        // Sliding all paragraphs like before might be bad in 
        // the future. Select .item paragraphs
        $('.item p').slideUp();
        // Find this item's paragraph and slide down.
        item.find('p').slideDown();
    };
});
1
Seth 8 Dez. 2013 im 17:44

Verwenden Sie .stop ()

$('p').stop().slideUp();
$(this).next().stop().slideDown();
0
mdesdev 8 Dez. 2013 im 17:31