javascript - Bootstrap 中的折叠元素

Question

<div >
 <div>
  <h3 style="display:inline-block;">Comments</h3>
  <button id="add_button" style="display:inline-block;margin-left:240px;" type="button" class="btn btn-primary" onClick="$('#add_button').hide()" data-toggle="collapse" data-target="#comments">Add</button>
 </div>
 <div id="comments" class="collapse in">
  <textarea style="resize:none;width:90%;" class="input xlarge" rows="4" id="comment-box" name="comment-box" placeholder="Type your comment here..."></textarea>
  <button style="margin-right:30px;" id="submit_comment" class="btn btn-primary pull-right" name="submit_comment" type="submit" onClick="">Submit</button>
 </div>
</div>

所以这是我的代码。我有一个来自 bootstrap 的可折叠元素，我试图让它在页面中开始折叠，但尝试了多种不同的方法我不能。我使用了几个 jQuery 命令，例如 hide() 和 collapse，但它们似乎都不起作用。关于如何让它发挥作用的任何想法？

Answer 1

如我在此 JSFiddle 中所示，只需从 id='comments' div 中删除 in 类，就可以在单击 添加按钮:

http://jsfiddle.net/JHkHE/1/