0

我有（我确定是）关于 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>

提前致谢！

4

1 回答 1

3

只需添加这个event.stopPropagation以防止单击单击冒泡到其父级。

演示

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

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

另一方面，您可以使用.show()和.hide( )而不是display:block and hide手动分配 css 属性。

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

相反，您可以使用

popup.show();

相似地

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

您可以使用

  $('.bubble_info').hide();
于 2013-05-12T03:38:38.580 回答