Скрытие элемента div при нажатии мыши на любую часть страницы, кроме элемента div - PullRequest
1 голос
/ 04 ноября 2010

В настоящее время у меня есть кнопка под названием «Комментарий», которая при нажатии скользит вниз по полю комментария.Я хочу, чтобы поле комментария скрывалось всякий раз, когда пользователь нажимает на любую область страницы, кроме самого поля комментария.

В настоящее время с моим кодом кнопка просто исчезает при нажатии.Кто-нибудь может указать мне правильное направление?Спасибо!

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


});

Ответы [ 2 ]

3 голосов
/ 04 ноября 2010

Ваши новые кнопки комментариев также должны остановить распространение , например:

$('.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>, поэтому он открывает форму комментария, затем клик всплывает и закрывает ее.

0 голосов
/ 04 ноября 2010

Если у вас есть такой 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);
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...