Question

我（我确定是）关于JQuery的初学者问题。

我正在尝试在单击图像时进行div弹出。（在一个页面上有多个这样的实例，顺便说一句。）

但是，单击“关闭”时，div不会关闭。

这是JQuery ......

$(document).ready(function() {
// Set up bubble CSS when page is loaded so bubble info is hidden unless user acts.
// If JavaScript is turned off bubble info displays normally.
//
//

  $('.bubble_wrapper').css('position', 'relative');
  $('.bubble_info').css({
    position: 'absolute',
    display: 'none'
  });
  $('.bubble_close').css('display', 'block');
});

$(function() {
  var counter = 1;
  $('.bubble_wrapper').each(function() {
    var trigger = $('#bubble_trigger'+counter, this);
    var popup = $('#bubble_info'+counter, this);

    $([trigger.get(0), popup.get(0)]).click(function() {
      $('.bubble_info').css('display', 'none');
      popup.css('display', 'block');
    });

    $('.bubble_close').click(function() {
      $('.bubble_info').css('display', 'none');
    });

    counter += 1;
  });
});

这是html（我在Rails工作，顺便说一句）......

<section id="latest_articles">
  <ul>
    <% id_counter = 1 %>
    <% @articles.each do |article| %>
      <li class="bubble_wrapper">
        <%= image_tag(article.image_url(:thumb), :class => "bubble_trigger", :id => "bubble_trigger"+id_counter.to_s) if article.image? %>
        <div class="bubble_info" id=<%= "bubble_info"+id_counter.to_s %> >
          <h1><%= link_to article.title, article %></h1>
          <p><%= article.description %></p>
          <a class="bubble_close">Close</a>
        </div>
      </li>
      <% id_counter += 1 %>
    <% end %>
  </ul>
</section>

提前致谢！

Answer 1

只需添加此event.stopPropagation即可防止点击点击冒泡到其父级。

Demo

$('.bubble_close').click(function(e) {
        e.stopPropagation();
      $('.bubble_info').css('display', 'none');
    });

这里发生的事情是附加到父$([trigger.get(0), popup.get(0)])的点击事件打开了div，但close按钮位于div中，它有自己的点击事件。因此，单击close div，其click事件将传播到其父级。所以它关闭并再次打开。 stopPropagation阻止事件冒泡DOM树，防止任何父处理程序被通知事件。

另外，您可以使用.show()和.hide()代替display:block and hide手动分配css属性。

popup.css('display', 'block');

而你可以使用

popup.show();

同样

 $('.bubble_info').css('display', 'none');

你可以使用

  $('.bubble_info').hide();

单击“关闭”时，不会隐藏JQuery div

1 个答案:

Demo