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

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

当我点击该链接时，我希望链接显示“显示详细信息”而不是“隐藏详细信息”，并且id =“details”的div应该从视图中消失，并显示其所有子项。 再次单击链接时，链接显示“HIDE DETAILS”和div的内容，其中包含要显示的详细信息，反之亦然（切换function）。 当页面首次显示时，我希望div的详细信息及其所有内容最初都不显示，链接应显示“SHOW DETAILS”。 如何编写Javascript来执行此操作？ 它一定很简单。

这是div：

 
 
 
media type: 
 
 
subject: 
  
 
title: 
  
 
full description: 
  
 
location: 
  
 
date:  
 
 
author: 
  
 
source: 
  
 
tags:  
  
 
 
This item is shared by
 

   

Answer 1

非常简单..只需使用切换

例：-

 //erb code 
Toggle div onclick
  SHOW DETAILS  
 //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"); } }); 

检查这个问题

Answer 2

试试这个HTML：

   Click 
Hello 

这个JS：

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

要最初隐藏它，请使用此css：

Answer 3

如果你想要更具体的答案。

鉴于：

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

Answer 4

这很容易，而不是使用link_to rails helper，使用一个简单的链接元素，因为你不需要转到rails视图，你不需要rails helper，但是如果你需要它，只需使用ERB：

 Go! 

现在，在您的情况下，您只需要使用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; } 

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