使用 rails 视图 html.erb 文件显示/隐藏 div 元素答案

【问题标题】：Show/Hide div element with rails view html.erb file使用 rails 视图 html.erb 文件显示/隐藏 div 元素
【发布时间】：2017-03-30 15:30:11
【问题描述】：

我正在尝试根据单击按钮/链接来显示/隐藏某些 div。我已经阅读了一些关于如何使用 JQuery 执行此操作的信息，但它似乎不起作用。

edit.html.erb

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="pad-bottom">
  <a id="edit-profile-button" class="button default ok" href="#">
    Edit Profile
  </a>
  <div id="profile-information" class="hidden">
    <div class="row pad-top">
      <div class="col-xs-6 col-sm-6 field-row">
        <div class="roboto bold black field-label">
          First
        </div>
        <%= f.text_field :first_name, class: 'field', placeholder: 'First Name'%>
      </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(event){
    $('#edit-profile-button').click(function(){
      event.preventDefault();
      $('#profile-information').toggle();
    });
  });
</script>

application.css

.hidden {
  display: none;
}

我可以单击链接并进入调试器并访问我尝试在 jQuery 代码中选择的两个元素，但它似乎根本没有做任何事情，div 永远不会可见。

【问题讨论】：

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

您的 css 有问题，hidden 不是有效的显示值。应该是：

  $(document).ready(function(){
    $('#edit-profile-button').click(function(){
      $('#profile-information').toggle();
    });
  });

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pad-bottom">
  <a id="edit-profile-button" class="button default ok">
    Edit Profile
  </a>
  <div id="profile-information" class="hidden">
    <div class="row pad-top">
      <div class="col-xs-6 col-sm-6 field-row">
        <div class="roboto bold black field-label">
          First
        </div>
        <%= f.text_field :first_name, class: 'field', placeholder: 'First Name'%>
      </div>
  </div>
</div>

【讨论】：

对不起，这是我的错字，它是 display: none
@ZackHerbert 你确定这不能解决你的问题吗？在我的代码 sn-p 中，我添加了您的代码现在可以正常工作。你有 jquery 吗？
我的例子只是输入错误，它被设置为 display: none;我只是在上面的代码 sn-p 中输入错误。我还在 html.erb 文件的顶部包含了 Jquery，如上所示...
@ZackHerbert 你顶部的 src 标签有 http 而不是 https，试试后者？
感谢您的帮助，但我决定使用 bootstrap collapse 来解决我的问题。我知道我的代码应该可以工作，但我无法确定出了什么问题，引导解决方案也确实简化了一切，这样我就不必为我想要的每个部分重复 jquery 代码 4 次能够切换

【解决方案2】：

结束使用引导程序解决我的问题 (http://getbootstrap.com/javascript/#collapse)

edit.html.erb

<div class="pad-bottom">
  <a id="edit-profile-button" class="button default ok" href="#profile-information" data-toggle="collapse" aria-expanded="false">
    Edit Profile
  </a>
  <div id="profile-information" class="collapse">
    <div class="row pad-top">
      <div class="col-xs-6 col-sm-6 field-row">
        <div class="roboto bold black field-label">
          First
        </div>
        <%= f.text_field :first_name, class: 'field', placeholder: 'First Name'%>
      </div>
  </div>
</div>

【讨论】：