如何隐藏和显示模态的内容? [英] How do I hide and show the contents contents of a modal?

问题描述

在我的模态中，我有一个链接.链接编写如下:

In my modal, I have a link. The link is written as follows:

<%= link_to "HIDE DETAILS", '#', class:'right' %>

当我单击该链接时，我希望该链接显示"SHOW DETAILS"而不是"HIDE DETAILS"，并且id ="details"的div应该在所有子视图中消失.当再次单击该链接时，该链接将显示"HIDE DETAILS"，并且div的内容带有要显示的详细信息，反之亦然(切换功能). 并且，当第一次显示该页面时，我希望带有详细信息及其所有内容的div最初不显示，并且链接应显示"SHOW DETAILS".我该如何编写Javascript来做到这一点?它必须非常简单.

When I click on that link, I want the link to display "SHOW DETAILS" instead of "HIDE DETAILS" and the div with id= "details" should disappear off the view with all its children. And when the link is clicked again, the link shows "HIDE DETAILS" and the contents of the div with details to show and vice-versa (toggle functionality). And when the page is first displayed, I want the div with details and all its content to initially not show and the link should display "SHOW DETAILS". How do I write the Javascript to do this ? It must be really simple.

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

推荐答案

非常简单.只需使用切换

示例:-

//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");
  }
});

检查此字段

CHECK THIS FIDDLE

这篇关于如何隐藏和显示模态的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！