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

Question

在我的模式中，我有一个 link。 link写法如下：

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

当我点击 link 时，我希望 link 显示 "SHOW DETAILS" 而不是 "HIDE DETAILS" 和 div with id= "details" 及其所有 children 应该从视图中消失。当再次单击 link 时，link 显示 "HIDE DETAILS" 和 div 的内容以及要显示的详细信息和 vice-versa（切换功能）。当页面首次显示时，我希望包含详细信息及其所有内容的 div 最初不显示，而 link 应显示 "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>

Answer 1

试试这个 HTML:

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

还有这个 JS：

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

要使其最初隐藏，请使用此 css:

<style>

    #myDiv{
        display: none;
    }

</style>

Answer 2

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

鉴于：

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

很简单..只需使用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");
  }
});

检查THIS FIDDLE

Answer 4

这很简单，不用 link_to rails 帮助程序，而是使用简单的 link 元素，因为您不需要转到 rails 视图你不需要 rails 助手，但如果你需要它，只需使用 ERB:

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

现在，在你的情况下，你只需要使用 jQuery 来：

更改 link 文本（切换文本）
Show/hide 您的内容详情

你可以这样做，很简单：

$("#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>

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

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

javascript

jquery

ruby-on-rails

erb