显示隐藏气泡div jQuery单击功能

Question

我对我的剧本有一个疑问。 我已经从codepen.io创建了这个DEMO

我正在尝试在链接上单击以弹出气泡。 我的onclick功能现在可以使用了。

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

另外，如果您单击右侧黑色div，那么您会看到left .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;
}

Codepen http://codepen.io/SebastienBeaulieu/pen/RNPzzL