Question

我对我的剧本有一个疑问。我已经从 codepen.io

创建了 DEMO

我正在尝试点击链接上的气泡弹出窗口。我的onclick功能现在正在运行。

我的问题是，如果您点击我的 DEMO 页面，那么您会看到有两张图片，当您将鼠标悬停在该图片上时，您会看到黑色div。因此，如果您点击此div，那么您会看到.bubble将会打开，但如果您将鼠标置于此div上，则仍会保持打开状态。好吧它应该保持打开但黑色div自动获得display:none =＆gt;我不想要它（我怎么能这样做。）

此外，如果您单击右侧黑色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; }

<强> Codepen http://codepen.io/SebastienBeaulieu/pen/RNPzzL

显示隐藏bubble div jquery点击功能

1 个答案: