2

我已经查看了十几个关于使用onclick、click、bind("click", ...)、on("click", ...)等的问题，但还没有找到我遇到的问题。

基本上它是一个可扩展的 div，在不展开时会隐藏一些内容。我正在使用collapse带有数据切换按钮的 Twitter Bootstrap 类来展开/折叠内容本身，但我还需要修改容器 div 的 CSS 以增加高度，以便在视觉上，内容所在的框会拉伸包含它。

这是我的脚本代码：

$(document).ready(function() {
    $("#expand-button").bind('click', expandClick($));
    document.getElementById("#expand-button").bind("click", expandClick($));
});

function expandClick($) {
    $("#outer-container").animate({ "height": "350" }, 500);
    $("#expand-button").html("^");
    $("#expand-button").bind("click", collapseClick($));
};

function collapseClick($) {
    $("#outer-container").animate({ "height": "50" }, 500);
    $("#expand-button").html("V");
    $("#expand-button").bind("click", expandClick($));
}

这个想法很简单，处理程序根据按钮的状态旋转进出。实际发生的情况是，一旦我加载页面，expandClick 函数就会立即执行，这会引发我的容器上下弹跳的无限循环，尽管没有单击任何内容。

有任何想法吗？

另外，我认为它不应该是相关的，但 HTML 看起来像：

    <div id="outer-container" class="container-fluid subsession-collapsed">
        <div class="row-fluid" style="height: 50px">
            <!-- OTHER STUFF... -->
            <div class="span1" id="4">
                <button id="expand-button" class="btn-success" data-toggle="collapse" data-target="#expandable">V</button>
            </div>
        </div>
        <br /><br />
        <div id="expandable" class="row-fluid collapse">
            <div class="span12" style="padding: 0 20px">
                <!-- CONTENT -->
            </div>
        </div>
    </div>

编辑：

我用来尝试寻找解决方案的一个 SO 主题是这个，但是所有的响应都给出了相同的结果。

4

2 回答 2

5

该语句将结果分配expandClick为处理程序，即

$("#expand-button").bind('click', expandClick($));

应该

$("#expand-button").bind('click', function() { expandClick($) });

另一个问题是您正在添加更多点击处理程序expandClick，collapseClick但从未删除它们

这就是我将重写您的代码的方式，我不知道您为什么要$四处走动

$(document).ready(function() {
    // Cache your variables instead of looking them up every time
    var expandButton =  $("#expand-button"),
        outerContainer =  $("#outer-container");

    function expandClick() {
        outerContainer.animate({ "height": "350" }, 500);
        expandButton.html("^");
        // Remove the previous handler
        expandButton.off('click', expandClick );
        // Bind the new handler
        expandButton.bind("click", collapseClick);
    };

    function collapseClick() {
       outerContainer.animate({ "height": "50" }, 500);
       expandButton.html("V");
        // Remove the previous handler
       expandButton.off('click', collapseClick);
        // Bind the new handler
       expandButton.bind("click", expandClick);
    }

    expandButton.bind('click', expandClick);
    // What is this????
    //document.getElementById("#expand-button").bind("click", expandClick($));
});
于 2012-10-30T18:51:31.003 回答
-1

不使用：

$(document).ready(function() {
    $("#expand-button").bind('click', expandClick($));
    document.getElementById("#expand-button").bind("click", expandClick());
});

尝试

<button id="expand-button" class="btn-success"
data-toggle="collapse" data-target="#expandable" 
onclick="expandClick($)">V</button>

还

function expandClick($) {
    $("#outer-container").animate({ "height": "350" }, 500);
    $("#expand-button").html("^");
    $("#expand-button").unbind("click", expandClick());
    $("#expand-button").bind("click", collapseClick());
};

function collapseClick($) {
    $("#outer-container").animate({ "height": "50" }, 500);
    $("#expand-button").html("V");
    $("#expand-button").unbind("click", collapseClick());
    $("#expand-button").bind("click", expandClick());
}
于 2012-10-30T18:52:19.707 回答