Question

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

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

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

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

4 个答案: