jQuery .next无效

Question

在这里使用以下jQuery(在文档的头部):

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function ExpCol(obj)
{
    var nextDiv = obj.next("div");
    nextDiv.animate({height: 'toggle'}, 800, function(){
        var vClass = nextDiv.is(':visible') ? 'collapse' : 'expand';
        obj.children(":first").removeClass().addClass(vClass);
    });     
}
</script>

HTML标记就像这样(在正文中):

<div id="reqMat" onclick="ExpCol(this);">
    <span class="expand"></span><h4 class="inlineblock">Header Text Here</h4>
</div>
<div style="display: none;">
    <p class="desc">Text in here...</p>
    <p class="desc">Text in here...</p>
</div>

单独样式表中的CSS如下所示:

.inlineblock
{
    display: inline-block;
}
.expand, .collapse
{
    cursor: pointer;
    display: inline-block;
    font-size: 1.5em;
    padding-right: .1em;
    color: #605953;
}

.expand {
    content: "+";
}
.collapse
{
    content: "-";
}

为什么下一次没有运作？是因为我将this物体传递给它吗？如果是这样,这样做的正确方法是什么？

Answer 1

.next()在普通的DOMElements中不可用(除非你自己添加一个).您正在传递DOMElement ExpCol()而不是jQuery对象.

更改

ExpCol(this);

至

ExpCol($(this));