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永远不可见。< / p>

Answer 1

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

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

使用bootstrap结束我的问题（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>

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

2 个答案: