Question

我有一组代表故事类别的div。在每个类别中，都有一个持有类别头部的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>

Answer 1

首先，您的代码格式不正确。例如，

<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>
</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>

我在点击功能中做了一些重新排序......

    $(".category-hed").click( function() {
        // 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

        $(".category-hed").not(this).find("h2").removeClass("expanded");      // unset the 'expanded' indicators in all categories
        $(".category-hed").not(this).siblings(".stories").hide();             // hide the "stories" divs in all categories
    });

尝试一下，让我知道它是怎么回事！

Answer 2

如果我正确地提出您的问题，那是因为当您点击已展开的category-hed时，它首先“已折叠”（通过删除expanded类），然后{{1} } {由expanded立即重新添加。在你的代码中，总会有一些东西最终被扩展，因为先前的状态不被考虑。像这样简单的东西可以解决问题：

.toggleClass()

可能有更好的方法可以做到这一点，但你明白了。

为什么jQuery不会切换这个div？

2 个答案: