[英]Show/Hide div element with rails view html.erb file
I am trying to show/hide certain divs depending on the click of a button/link. 我试图显示/隐藏某些div,具体取决于单击按钮/链接。 I have done some reading on how to do this with JQuery, but it doesn't seem to be working. 我已经阅读了一些有关如何使用JQuery进行阅读的内容,但似乎没有用。
edit.html.erb 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 application.css
.hidden {
display: none;
}
I can click on the link and fall into a debugger and access the two elements that I try to select in the jQuery code, but it doesn't seem do be doing anything at all, the div is never made visible. 我可以单击链接并进入调试器,并访问我尝试在jQuery代码中选择的两个元素,但似乎根本没有做任何事情,div从未显示出来。
Your css has an issue, hidden
is not a valid value for display. 您的CSS出现问题,“ hidden
不是用于显示的有效值。 It should be: 它应该是:
$(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>
Ended using bootstrap to solve my problem ( http://getbootstrap.com/javascript/#collapse ) 最终使用引导程序解决了我的问题( http://getbootstrap.com/javascript/#collapse )
edit.html.erb 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.