Toggle funktioniert nicht für meine jQuery

Question

so habe ich derzeit ein Programm geschrieben, wo, wenn Sie auf eine Nachrichten '.article' Überschrift klicken, die '.description' unten erscheint und die Überschrift grau markiert ist und alle anderen Überschriften geschlossen bleiben. Wenn Sie dann auf eine andere Überschrift klicken, wird die erste, die Sie angeklickt haben, geschlossen, und die neue wird hervorgehoben und geöffnet. die Javascript sieht wie folgt aus:

var main = function() { 
$('.article').click(function() { 
    $('.article').removeClass('current'); 
    $('.description').hide(); 

    $(this).addClass('current'); 
    $(this).children('.description').toggle(); 
}); 

}; 

$(document).ready(main); 

Hier ist das die CSS für 'current' wie folgt aussieht:

.current .item { 
background: rgba(206,220,206,.9); 
} 

Nun, meine Frage ist, wie ich die aktuell geöffnete Artikel schließen möchten, wenn Sie auf es wieder. Deshalb habe ich den Toggle-Befehl $(this).children('.description').toggle(); statt .show()

geschrieben Aber es ist nicht umschalten ... warum? Es öffnet sich, aber es wird nicht geschlossen, es sei denn, ich klicke auf eine andere Artikelüberschrift. Ich hoffe, ich habe in dem, was ich geschrieben habe, einen Sinn ergeben. Dies ist mein erster Versuch, JavaScript zu lernen und ich könnte die Hilfe nutzen.

vollständige Offenlegung: Dies ist aus Codeacademy Lektion über den Aufbau einer interaktiven Website, aber ihre Q/A hatte nicht die Antwort auf mein Problem und anscheinend wird nicht mehr überwacht, weil sie diese Lektion beenden.

BEARBEITEN: wie gewünscht, hier ist ein Beispiel des HTML (es ist wirklich lang, also wollte ich nicht die ganze Sache posten, aber ich werde, wenn Sie wollen).

<div class="article"> 
    <div class="item row"> 
     <div class="col-xs-3"> 
     <p class="source">AW Commercial Aviation</p> 
     </div> 
     <div class="col-xs-6"> 
     <p class="title">CSeries Supplier Scramble</p> 
     </div> 
     <div class="col-xs-3"> 
     <p class="pubdate">Mar 22</p> 
     </div> 
    </div> 
    <div class="description row"> 
     <div class="col-xs-3">&nbsp;</div> 
     <div class="col-xs-6"> 
     <h1>CSeries Supplier Scramble</h1> 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
     </div> 
     <div class="col-xs-3">&nbsp;</div> 
    </div> 
    </div> 

Danke,

learninghowtocode

Answer 1

Das Problem ist, dass $('.description').hide(); die ALL versteckt .description Elemente dann zeigen Sie die aktuellen, hin- und herzuschalten. Sie müssen nur diejenigen verstecken, die nicht Kinder des aktuellen Artikels sind

Hier ist eine einfachere Methode (Basierend Scotts Antwort, Gotta Liebe, wie wir alle schieben sich gegenseitig besser sein off):

$(document).ready(function() { 
 
    $('.article').on('click', function() { 
 
    var $this=$(this).toggleClass('current'); 
 
    $('.article').not($this).removeClass('current'); 
 
    }); 
 
});

.current .item { 
 
    background: rgba(206, 220, 206, .9); 
 
} 
 
.article:not(.current) .description { 
 
    display: none; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="article"> 
 
    <div class="item row"> 
 
    <div class="col-xs-3"> 
 
     <p class="source">AW Commercial Aviation</p> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <p class="title">CSeries Supplier Scramble</p> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <p class="pubdate">Mar 22</p> 
 
    </div> 
 
    </div> 
 
    <div class="description row"> 
 
    <div class="col-xs-3">&nbsp;</div> 
 
    <div class="col-xs-6"> 
 
     <h1>CSeries Supplier Scramble</h1> 
 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
 
    </div> 
 
    <div class="col-xs-3">&nbsp;</div> 
 
    </div> 
 
</div> 
 
<div class="article"> 
 
    <div class="item row"> 
 
    <div class="col-xs-3"> 
 
     <p class="source">AW Commercial Aviation</p> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <p class="title">CSeries Supplier Scramble</p> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <p class="pubdate">Mar 22</p> 
 
    </div> 
 
    </div> 
 
    <div class="description row"> 
 
    <div class="col-xs-3">&nbsp;</div> 
 
    <div class="col-xs-6"> 
 
     <h1>CSeries Supplier Scramble</h1> 
 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
 
    </div> 
 
    <div class="col-xs-3">&nbsp;</div> 
 
    </div> 
 
</div> 
 
<div class="article"> 
 
    <div class="item row"> 
 
    <div class="col-xs-3"> 
 
     <p class="source">AW Commercial Aviation</p> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <p class="title">CSeries Supplier Scramble</p> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <p class="pubdate">Mar 22</p> 
 
    </div> 
 
    </div> 
 
    <div class="description row"> 
 
    <div class="col-xs-3">&nbsp;</div> 
 
    <div class="col-xs-6"> 
 
     <h1>CSeries Supplier Scramble</h1> 
 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
 
    </div> 
 
    <div class="col-xs-3">&nbsp;</div> 
 
    </div> 
 
</div>

---

Ursprüngliche Antwort:

Das Problem ist, dass $('.description').hide(); blendet alle .description Elemente dann schalten Sie die aktuellen um zu zeigen. Sie müssen nur diejenigen verstecken, die mit so etwas wie dies nicht Kinder des aktuellen Artikels sind:

$('.article').not($(this)).find('.description').hide();

$(document).ready(function() { 
 
    $('.article').click(function() { 
 
    $('.article').removeClass('current'); 
 
    $('.article').not($(this)).find('.description').hide(); 
 
    $(this).addClass('current'); 
 
    $(this).children('.description').toggle(); 
 
    }); 
 
});

.article.current { 
 
    background: rgba(206, 220, 206, .9); 
 
} 
 
.article:not(.current) .description { 
 
    display: none; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="article"> 
 
    <div class="item row"> 
 
     <div class="col-xs-3"> 
 
     <p class="source">AW Commercial Aviation</p> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <p class="title">CSeries Supplier Scramble</p> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
     <p class="pubdate">Mar 22</p> 
 
     </div> 
 
    </div> 
 
    <div class="description row"> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
     <div class="col-xs-6"> 
 
     <h1>CSeries Supplier Scramble</h1> 
 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
 
     </div> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
    </div> 
 
    </div> 
 
    <div class="article"> 
 
    <div class="item row"> 
 
     <div class="col-xs-3"> 
 
     <p class="source">AW Commercial Aviation</p> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <p class="title">CSeries Supplier Scramble</p> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
     <p class="pubdate">Mar 22</p> 
 
     </div> 
 
    </div> 
 
    <div class="description row"> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
     <div class="col-xs-6"> 
 
     <h1>CSeries Supplier Scramble</h1> 
 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
 
     </div> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
    </div> 
 
    </div> 
 
    <div class="article"> 
 
    <div class="item row"> 
 
     <div class="col-xs-3"> 
 
     <p class="source">AW Commercial Aviation</p> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <p class="title">CSeries Supplier Scramble</p> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
     <p class="pubdate">Mar 22</p> 
 
     </div> 
 
    </div> 
 
    <div class="description row"> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
     <div class="col-xs-6"> 
 
     <h1>CSeries Supplier Scramble</h1> 
 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
 
     </div> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
    </div> 
 
    </div>

Answer 2

vereinfacht.

Sie können lediglich die Klasse des Klickelements umschalten, es ist nicht erforderlich, dieselbe Klasse hinzuzufügen und zu entfernen.Das ist, was toggleClass() ist für.

Verwenden Sie eine Variable für das Objekt zu verbergen/anzeigen und CSS verwenden, um diese Klasse standardmäßig auszublenden, ist ein bisschen effizienter. Sie müssen nicht darauf warten, dass das DOM nach versteckten Objekten lädt.

var main = function() { 
 
$('.article').on('click',function() { 
 
\t var desc = $(this).children('.description'); 
 
    $(this).toggleClass('current'); //simple class toggle on click element 
 
    $(desc).toggle(); 
 
}); 
 

 
}; 
 

 
$(document).ready(main);

.current .item { 
 
background: rgba(206,220,206,.9); 
 
} 
 

 
.description { display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="article"> 
 
    <div class="item row"> 
 
     <div class="col-xs-3"> 
 
     <p class="source">AW Commercial Aviation</p> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <p class="title">CSeries Supplier Scramble</p> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
     <p class="pubdate">Mar 22</p> 
 
     </div> 
 
    </div> 
 
    <div class="description row"> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
     <div class="col-xs-6"> 
 
     <h1>CSeries Supplier Scramble</h1> 
 
     <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> 
 
     </div> 
 
     <div class="col-xs-3">&nbsp;</div> 
 
    </div> 
 
</div>