Jquery折叠与切换答案

【问题标题】：Jquery Collapsing with ToggleJquery折叠与切换
【发布时间】：2014-08-03 17:36:33
【问题描述】：

我有一个双重折叠视图，单击按钮后，图像会“折叠”掉，文本部分会“折叠”打开。这个功能是有效的。但是，当我将onclick() 添加到按钮以更改颜色（通过类）和字体真棒图片时，会出现奇怪的功能。通常它可以工作，但是通常在重新加载页面时第一次单击只会导致按钮更改，不会折叠。什么给了！？

这里有一些代码，其他可能需要的注释：

Haml 按钮和随后的折叠部分：

%h2
  Name
  %button.btn.btn-info.pull-right{data:{toggle:"collapse", target:".buy-collapse#{ammo.id}", parent:"accordion"}, onclick:'buyChange($(this))'}
      %i.fa.fa-shopping-cart
        Buy
%hr
// Order Form
.collapse{class:"buy-collapse#{ammo.id}"}
  -# Form is here

= image_tag "ammos/"+ammo.img, :class=>"", :class=>"img-responsive img-centered buy-collapse#{ammo.id} collapse in", :alt=>''

按钮更改的内部javascript函数：

:javascript
  function buyChange($this) {
    if ($this.hasClass("btn-info")) {
      $this.removeClass("btn-info");
      $this.addClass("btn-danger");
      $this.html('<i class="fa fa-times"> Cancel</i>');
    } else {
      $this.removeClass("btn-danger");
      $this.addClass("btn-info");
      $this.html('<i class="fa fa-shopping-cart"> Buy</i>');
    }
  }

关于我的项目的一些信息，rails -v 4.1，bootstrap，font-awesome

【问题讨论】：

标签： javascript jquery html twitter-bootstrap haml

【解决方案1】：

您的文档是否已加载？通常，您不想像这里那样混合使用 html 和 javascript。尝试将类似以下代码的内容添加到您的 app/assets/javascripts 文件夹中的相应 javascript 文件中：

var ready;
ready = function() {

  // I'd recommend an id selector here
  $('button.btn.btn-info.pull-right').on('click', function() {
    // Add your code to change button and collapse form and
    // whatever else you want to happen on click here.
  });

};

$(document).ready(ready);
$(document).on('page:load', ready);

【讨论】：