1
이야기 카테고리를 나타내는 div 세트가 있습니다. 각 카테고리에는 카테고리 헤드를 포함하는 div와 스토리의 요약을 포함하는 형제 div가 있습니다.jQuery가이 div를 토글하지 않는 이유는 무엇입니까?
기본 스토리를 포함하는 카테고리를 제외하고 모든 div가 숨겨져 있습니다. 그 이야기 div의 표시 (아래 CAT2)를 밖으로 시작합니다
나는 다른 카테고리 헤드의 클릭하면, 나는 모든 종류의 헤드 된 div의 아래쪽 삼각형 아이콘을 설정하는 '확장'클래스를 제거[ cat1 < ]
[ cat2 V ]
- story2-1
- story2-2
[ cat3 < ]
, 모든 스토리 div를 숨긴 다음 클릭 된 카테고리 헤드에서 '확장'클래스를 토글하고 마지막으로 클릭 된 카테고리 헤드의 형제 인 스토리 div를 토글합니다.
카테고리 헤드를 클릭하면이 모든 것이 정상적으로 작동합니다. 현재 펼쳐진 것보다 좋습니다.
문제 : 나는 그들이 모든 붕괴 이야, 그래서 그것을 축소하려면 현재 확장 카테고리 헤드를 클릭하면는, 아무 일도 발생하지 않습니다. 또는 더 구체적으로 말하자면, 결과를 기록 할 때 이야기 div가 '표시'속성을 '차단'으로 설정 한 다음 즉시 '없음'으로 다시 설정한다는 것을 알 수 있습니다. 왜???
내가 제대로 질문을 undersand 경우에는 category-hed 이미 확장을 클릭하면, 그것은 최초의 "붕괴"때문에
<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, 여분 div는 코드 - cleanup bug - 이야기 div가 카테고리 hed div (아이가 아닌)의 형제 *이기 때문에 그것을 보았어야만합니다. 조정 된 클릭 기능은 훌륭하게 작동합니다. - 감사합니다 !!! – Val
듣기 좋게! -) – mikesir87