J'ai un ensemble de divs qui représentent des catégories d'histoires. Dans chaque catégorie, il y a un div qui tient le titre de la catégorie, et un div divorcent qui contient des résumés des histoires. Je commence avec toutes les histoires divs cachées, à l'exception de la catégorie qui contient l'histoire par défaut; ses histoires div commence visible (cat2 ci-dessous):Pourquoi jQuery ne bascule-t-il pas cette div?
[ cat1 < ]
[ cat2 V ]
- story2-1
- story2-2
[ cat3 < ]
Lorsque je clique sur l'une des autres têtes de catégorie, je supprimer la classe « élargie » qui définit l'icône vers le bas-triangle sur tous les divs de tête de la catégorie, cachez tous les divs de l'histoire, puis basculez la classe 'expanded' sur la tête de la catégorie cliquée, et enfin basculez la div des histoires qui est le frère de la catégorie cliquée.
Tout cela fonctionne très bien si je clique sur une tête de catégorie autre que le actuellement élargi.
PROBLÈME: Si je clique sur la tête de la catégorie actuellement élargi pour le réduire, ils sont donc ALL se sont effondrés, rien ne se passe. Ou plus précisément, lorsque je consigne les résultats, je vois que l'attribut div obtient sa propriété 'display' sur 'block', puis immédiatement sur 'none'. Pourquoi???
Le code
<html>
<head>
<style type="text/css">
.category { width: 200px; }
.category-hed { cursor: pointer; }
.category-hed h2 {
background-image: url(/_img/b/category-hed-arrow-collapsed.gif);
background-repeat: no-repeat;
background-position: center right;
}
.category-hed h2.expanded {
background-image: url(/_img/b/category-hed-arrow-expanded.gif);
}
.category .stories { /* default hidden; clicking category-hed will toggle it */
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// set click handlers on the category section headers to expand/collapse the sections
$(".category-hed").click(function() {
$(".category-hed h2").removeClass("expanded"); // unset the 'expanded' indicators in all categories
$(".stories").hide(); // hide the "stories" divs in all categories
// TODO: this doesn't collapse an already-expanded section... why?
$("h2", this).toggleClass("expanded"); // 2nd arg to $() sets context of the selection: h2 under this
$(this).siblings(".stories").toggle(); // show this category's "stories" div
});
// the default story's category section should initially be expanded
var defaultStoryCatID = "#category-2";
$("h2", defaultStoryCatID).toggleClass("expanded");
$(".stories", defaultStoryCatID).show();
});
</script>
</head>
<body>
<div class="category" id="category-1">
<!-- nested H2 below to aid border styling; CSS omitted -->
<div class="category-hed"><h2>Category 1</h2></div>
<div class="stories">
<div class="story">
<h3>cat 1 story1 head</h3>
<p>... the story...</p>
</div>
<div class="story">
<h3>cat 1 story2 head</h3>
<p>... another story...</p>
</div>
</div>
</div>
<div class="category" id="category-2">
<div class="category-hed"><h2>Category 2</h2></div>
<div class="stories">
<div class="story">
<h3>cat 2 story1 head</h3>
<p>... the story...</p>
</div>
<div class="story">
<h3>cat 2 story2 head</h3>
<p>... another story...</p>
</div>
</div>
</div>
<div class="category" id="category-3">
<div class="category-hed"><h2>Category 3</h2></div>
<div class="stories">
<div class="story">
<h3>cat 3 story1 head</h3>
<p>... the story...</p>
</div>
<div class="story">
<h3>cat 3 story2 head</h3>
<p>... another story...</p>
</div>
</div>
</div>
</body>
</html>
Doh, les divs supplémentaires étaient un code- bug de nettoyage - J'aurais dû voir ça parce que les histoires div est un * sibling * de la div de catégorie-hed, pas un enfant.Fixé.Cette fonction de clic réordonné fonctionne très bien - merci !!! – Val
heureux de l'entendre! -) – mikesir87