Question

我试图让div元素关闭并使用Twitter Bootstraps折叠功能打开，出于某种原因，尽管开启很好但它不会关闭。

我试图通过Javascript和数据属性触发它，但两者都没有奏效。将宽度和/或高度属性添加到它的CSS也没有任何改变。我可以通过removeClass('in');重置它，但这是突然的，不是更好。

使用Javascript：

// Hide/show achievement reward on mouse enter/leave
$(".achievement").each(function (i) {
    var reward = $(this).find(".reward");
    $(this).mouseenter(function () { reward.collapse('toggle'); });
    $(this).mouseleave(function () { reward.collapse('toggle'); });
});

HTML：

<div class="achievement collapse" title="..."><div class="title">
    <span class="glyphicon glyphicon-ok-circle"></span> A Step Forward</div>
    <span class="description">Make one dollar.</span>
    <div class="reward collapse">+1 Stock</div></div> <!-- This element is what has the problem -->

CSS：

.reward {
    font-style: italic;
    font-size: 110%;
    font-weight: bold;
    color: rgba(0,170,0,1);
}

Answer 1

在看到我的代码在JSFiddle中工作后再看一下我的Javascript，我发现这大约有4行：

$(".achievement").on('hide.bs.collapse', function (e) { e.preventDefault(); }); // So that achievements don't disappear after appearing

显然这也影响了儿童元素，因为对此进行评论可以解决问题。

为什么这会崩溃＆＃39; div一旦打开就关闭了吗？

1 个答案: