使用Rails显示/隐藏div元素查看html.erb文件

Question

我试图显示/隐藏某些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从未显示出来。

Answer 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> 

Answer 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>