显示隐藏气泡div jquery点击功能

Question

我对我的脚本有一个疑问。 我从 codepen.io

创建了这个 DEMO

我正在尝试让点击链接的气泡弹出。我的 onclick 功能现在可以工作了。

我的问题是，如果您单击我的 DEMO 页面，那么您会看到有两个图像，当您将鼠标悬停在该图像上时，您会看到黑色 div。 因此，如果您单击此div，那么您会看到.bubble 将打开，但如果您将鼠标放在此 div 上，气泡仍将保持打开状态。好的，它应该保持打开状态，但黑色 div 自动获取 display:none => 我不想要它（我该怎么做。）

此外，如果您单击右侧黑色 div，那么您会看到左侧 .bubble 仍然保持打开状态，所以我希望当我单击其他黑色 div 时，我希望其他气泡会自动 hide。

有人可以在这方面帮助我吗？

这是我的 jquery 函数：

$(document).ready(function() {
          $('.nav-toggle').click(function(){
            var collapse_content_selector = $(this).attr('href');       
            var toggle_switch = $(this);
            $(collapse_content_selector).toggle(function(){
              if($(this).css('display')=='none'){
                toggle_switch.html('x');
              }else{
                toggle_switch.html('x');
              }
            });
          });
        });

Answer 1

你可以修改这段 css ：

.imgar:hover .delete, .imgar.selected .delete{
display: block;
}

注意，我添加了 selected 类，所以当您执行 js 事件时，单击将类事件添加到 imgar，如下所示：

$('.imgar').addClass('selected');

当他点击返回元素时不要忘记删除类：

$('.imgar').removeClass('selected');

编辑

JS

$(document).ready(function() {
          $('.nav-toggle').click(function(){
            var collapse_content_selector = $(this).attr('href');       
            var toggle_switch = $(this);
            $('.imgar').removeClass('selected'); // Remove the X before openning a second
            if($(collapse_content_selector).css('display')=='none'){
              $('.bubble').hide();
            }
            $(collapse_content_selector).toggle(function(){
              if($(this).css('display')=='none'){
          toggle_switch.parent().parent().removeClass('selected');
                toggle_switch.html('x');
              }else{
          toggle_switch.parent().parent().addClass('selected');
                toggle_switch.html('x');
              }
            });
          });

        }); 

CSS

.imgar:hover .delete, .imgar.selected .delete{
    display: block;
}

代码笔 http://codepen.io/SebastienBeaulieu/pen/RNPzzL