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

普通DOMElements中不提供

.next()（除非您自己添加一个）。您正在将DOMElement传递给ExpCol()而不是jQuery对象。

更改

ExpCol(this);

到

ExpCol($(this));

Answer 2

this不是jQuery对象，也没有为它定义next函数。（this是click事件的来源，在本例中是div DOM元素本身）

我想你打算：

var nextDiv = $(obj).next("div");

但是，由于您还有obj.children的来电，我建议您将代码更改为：

function ExpCol(element)
{
    var obj = $(element);

    var nextDiv = obj.next("div");
    nextDiv.animate({height: 'toggle'}, 800, function(){
        var vClass = nextDiv.is(':visible') ? 'collapse' : 'expand';
        obj.children(":first").removeClass().addClass(vClass);
    });     
}

或者使用ExpCol($(this))调用它，尽管这需要您始终记住传递ExpCol jQuery对象。

jQuery .next无效

2 个答案: