У меня есть набор div, которые представляют категории историй. В каждой категории есть div, содержащий заголовок категории, и div, содержащий краткое изложение историй.
Я начинаю со всех скрытых div историй, за исключением категории, которая содержит историю по умолчанию; его история начинается с видимого элемента (cat2 ниже):
[ cat1 < ]
[ cat2 V ]
- story2-1
- story2-2
[ cat3 < ]
Когда я щелкаю по любому из заголовков других категорий, я удаляю «расширенный» класс, который устанавливает значок в виде треугольника вниз для всех div-ов заголовков категории, скрывает все div-фрагменты истории, затем переключаю «расширенный» класс на щелкнул заголовок категории и, наконец, переключил div историй, который является родственным элементом заголовка категории.
Все это прекрасно работает, если я нажимаю на заголовок категории , отличный от , чем текущий.
ПРОБЛЕМА: Если я щелкну по заголовку развернутой в данный момент категории, чтобы свернуть его, чтобы они ALL свернулись, ничего не произойдет. Или, более конкретно, когда я регистрирую результаты, я вижу, что для div с историей устанавливается свойство «display», установленное в «block», а затем сразу же «none». Почему ???
Код
<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>