在我的模态中,我有一个链接。链接编写如下:
<%= link_to "HIDE DETAILS", '#', class:'right' %>
当我点击该链接时,我希望链接显示“SHOW DETAILS”而不是“HIDE DETAILS”,而id =“details”的div应该从视图中消失,并显示其所有子节点。再次单击链接时,链接显示“HIDE DETAILS”和div的内容,其中包含要显示的详细信息,反之亦然(切换功能)。 当页面首次显示时,我希望div的详细信息及其所有内容最初都不显示,链接应显示“SHOW DETAILS”。如何编写Javascript来执行此操作?它一定很简单。
这是div:
<div id="details">
<ul class="errors"></ul>
<div style="float:left; margin-right:0.5em; color: #860038"><i>media type: </i></div><%= @image.media_type %>
<br>
<div style="float:left; margin-right:0.5em; color: #860038"><i>subject: </i></div> <%= @image.subject %>
<br>
<div style="float:left; margin-right:0.5em; color: #860038"><i>title: </i></div> <%= @image.title %>
<br>
<div style="float:left; margin-right:0.5em; color: #860038"><i>full description: </i></div>
<%= @image.description %>
<br>
<div style="float:left; margin-right:0.5em; color:#860038;"><i>location: </i></div>
<%= @image.location %>
<br>
<div style="float:left; margin-right:0.5em; color: #860038;"><i>date: </i> </div>
<br>
<div style="float:left; margin-right:0.5em; color: #860038;"><i>author: </i></div>
<%= @image.author %>
<br>
<div style="float:left; margin-right:0.5em; color: #860038;"><i>source: </i></div>
<%= @image.source %>
<br>
<div style="float:left; margin-right:0.5em; color:#860038;"><i>tags: </i> </div> <%= @image.tag_list.join(' - ') %>
<br>
<br>
<div style="float:left; margin-right:0.5em; color:#009345;">This item is shared by</div><span style="color:#0F004E;"><%= @image.user.name_first+ ' ' %> </span><span style="color:#860038;"><%=@image.user.name_last %><br><br>
<%= link_to "Edit Item", '#', class: "btn btn-lg btn-primary" %>
</div>
答案 0 :(得分:1)
试试这个HTML:
<button id="myButton"> Click</button>
<div id="myDiv">Hello</div>
这个JS:
$("#myButton").click(function(){
$("#myDiv").toggle();
});
要最初隐藏它,请使用此css:
<style>
#myDiv{
display: none;
}
</style>
答案 1 :(得分:1)
如果您想要更具体的答案。
假设:
<%= link_to "HIDE DETAILS", '#', class:'right' %>
尝试:
$('.right').click(function(evt) {
evt.preventDefault();
$link = $(this);
$detail = $('#details');
if ($link.text() == "SHOW DETAILS") {
$link.text("HIDE DETAILS");
} else {
$link.text("SHOW DETAILS");
}
$detail.toggle();
}
更新:如果链接是模态的,那么您需要动态附加事件侦听器,如下所示:
$.fn.attachToggle = function() {
$(this).click(function(evt) {
evt.preventDefault();
$link = $(this);
$detail = $('#details');
if ($link.text() == "SHOW DETAILS") {
$link.text("HIDE DETAILS");
} else {
$link.text("SHOW DETAILS");
}
$detail.toggle();
}
}
然后在模态主体上调用attachToggle
,例如:$([modal_body_id]).find('.right').attachToggle();
答案 2 :(得分:0)
非常简单..只需使用Toggle
例如: -
//erb code
<h1 id="title">Toggle div onclick</h1>
<a class="right" href="javascript:void(0);" title="Toggle me">
<span id="toggle-text">SHOW</span> DETAILS
</a>
<div id="details" style="display:none;">
//js code
$('.right').on("click", function() {
//toggle the div
$("#details").toggle();
//update the text too
if ($("span#toggle-text").html() == "SHOW") {
$("span#toggle-text").html("HIDE");
} else {
$("span#toggle-text").html("SHOW");
}
});
答案 3 :(得分:0)
很容易,而不是使用link_to rails helper,使用一个简单的链接元素,因为你不需要转到rails视图,你不需要rails helper,但是如果你需要它,只需使用ERB:
$("#theLink").click(function() {
var link = $(this);
var content = $('.details');
if (link.text() === 'Show Details') {
link.text('Hide Details');
content.css('display', 'block');
} else {
link.text('Show Details');
content.css('display', 'none');
}
});
现在,在您的情况下,您只需要使用jQuery:
你可以做这样的事情,非常简单:
a {
font-family: sans-serif;
font-weight: 700;
text-decoration: none;
color: peru;
}
.details {
font-family: Arial, sans-serif;
color: white;
background: tomato;
padding: 20px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="theLink">Show Details</a>
<div class="details">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi fugit iusto consequuntur distinctio omnis sint similique provident. Assumenda, est? Cumque inventore blanditiis officia corrupti voluptate qui quasi quae recusandae accusamus.
</div>
_