我正在使用https://github.com/thoughtbot/paul_revere gem在Rails应用程序中管理公告。该宝石的部分内容用于显示公告。看起来像这样:

<% if announcement_visible?(current_announcement) %>
  <div id="announcement">
    <span><%= current_announcement.body.html_safe %></span>
    <span class="hide">
      <%= link_to "hide", "#", onclick: "hideAnnouncement('#{current_announcement.to_cookie_key}')" %>
    </span>
  </div>
<% end %>


我为此添加了一些CSS:

#announcement{
  position: relative;
  left: 10px;
  width: 50%;

  @extend .alert;
  @extend .alert-dismissible;
  @extend .alert-info;
  @extend .animated;
  @extend .fadeInUp;
}


它看起来像这样:
javascript - 关闭 bootstrap 警报-LMLPHP

但是我不能使隐藏链接隐藏警报起作用。我也想用x代替hide。有没有办法用纯CSS做到这一点而又不覆盖gem部分?

最佳答案

如果您无法在源文件或gem文件中进行更改,可以添加此jQuery位吗?

$(document).ready(function () {
  $("#announcement").find(".hide").html("&times;").attr("data-dismiss", "alert");
});

关于javascript - 关闭 bootstrap 警报,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32090799/

10-11 23:25
查看更多