0

在此处使用以下 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对象传递给它吗？如果是这样，这样做的正确方法是什么？

4

2 回答 2

6

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

改变

ExpCol(this);

到

ExpCol($(this));

于 2013-07-19T05:48:01.600 回答
2

this不是 jQuery 对象，您也没有next为它定义函数。（this是点击事件的来源，在这种情况下是divDOM 元素本身）

我想你打算：

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 对象。

于 2013-07-19T05:48:46.463 回答