如何隐藏和显示一个模态的内容

How do I hide and show the contents contents of a modal?

本文关键字：模态 一个 显示 何隐藏 隐藏      更新时间：2023-09-26

在我的模式中，我有一个链接。链接如下:

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

试试这个HTML:

      <button id="myButton"> Click</button>
      <div id="myDiv">Hello</div>

这个JS:

    $("#myButton").click(function(){
            $("#myDiv").toggle();
    });

初始隐藏，使用如下css:

<style>
    #myDiv{
        display: none;
    }
</style>

如果你想要更具体的答案

给定

: 

<%= 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();   
}

UPDATED:如果链接是模态的，那么你需要动态地附加事件监听器，像这样:

$.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();

非常简单，只需使用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");
  }
});

检查此提琴

这很容易，而不是使用link_to rails帮助器，使用一个简单的link元素，因为您不需要转到rails视图，您不需要rails帮助器，但如果您需要它，只需使用ERB:

<a href="{%= view_path %}">Go!</a>

现在，在你的例子中，你只需要使用jQuery来:

  1. 更改链接文本(切换文本)
  2. 显示/隐藏您的内容详细信息

你可以这样做，非常简单:

$("#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');
  }
});
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>

相关文章：