Question

目前，我有一个名为“评论”的按钮，点击该按钮会向下滑动评论框。我希望每当用户点击页面的任何区域而不是评论框本身时，都会隐藏评论框。

目前，使用我的代码，按钮在单击时就会消失。有人能指出我正确的方向吗？谢谢！

Ruby ERB：

<% @entry.each do |e| %>
<div class="entry">
<p><%= e.entry %></p>
<small>Posted by <%= e.author %> at <%= e.created_at.strftime("%I:%M%p %m/%d/%Y") %></small>
<% if e.comments.nil? %>
    <p>No Comments</p>
<% else %>
    <% e.comments.each do |c| %>
    <div class="comment">
    <blockquote><strong><%= c.author %></strong> writes:<%= c.comment %></blockquote>
    </div>
    <% end %>
<% end %>
<div class="comments">
<a href="#" data-comment="<%= e.id %>" class="newcommentbutton">Comment</a>
<div class="newcomment" id="comment<%= e.id %>">
<%= form_for @comment, :url => entry_comments_path(e, @comment) do |f| %>
<ol>
<li><%= f.label :author %>
<%= f.text_field :author %></li>
<li><%= f.label :comment %>
<%= f.text_area :comment %></li>
<%= f.submit %>
</ol>
<% end %>
</div>
</div>
    </div>
<hr />
<% end %>
<%= button_to "Write A Message", new_entry_path, :method => :get %>

使用Javascript：

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
$(document).ready(function()
{
$('.newcommentbutton').click(function()
{
    var button = $(this);
    var comment = button.attr('data-comment');
    button.hide();
    $('#comment' + comment).slideDown('fast', function() {
        $('#comment' + comment + ' input[type=text]').focus();  
    });

});
$('.newcomment').click(function(event)
{
    event.stopPropagation();
});
$('body').click(function()
{
    $('.newcomment').hide();
});


});

Answer 1

您的新评论按钮也需要stop propagation，如下所示：

$('.newcommentbutton').click(function(e) {
    var button = $(this);
    var comment = button.attr('data-comment');
    button.hide();
    $('#comment' + comment).slideDown('fast', function() {
        $('#comment' + comment + ' input[type=text]').focus();  
    });
    e.stopPropagation();
});

您有正确的想法，只需记住.newcommentbutton中的<body> ，因此它会打开评论表单，然后点击气泡并将其关闭。

Answer 2

如果你有这样的div：

<div id="comment"...>

当您展示它时，您可以将焦点放在它上面：

document.getElementById('comment').focus();

您需要为tabindex设置DIV属性才能使焦点发挥作用：

<div id="comment" tabindex="99"...>

然后你在它上面设置一个onblur，当用户点击页面上的任何地方时它会消失：

document.getElementById('comment').onblur = function(){
  this.parentNode.removeChild(this);
};

在页面的任何部分单击鼠标时隐藏div，而不是div

2 个答案: