Question

最终编辑：我在codepen找到了更好的解决方案，更简单。 demo工作功能。

编辑：我发现错误的来源你可以看到一个例子here。当您单击时，可以说“关于”选项卡并将鼠标悬停在联系人上，应隐藏内容。但是你回过头来盘旋，内容保持可见，但事实并非如此。如何确保在单击后触发mouseout事件？

编辑2：所以我注意到unbind（）方法阻止了这一点。当我删除它时，我似乎无法让内容区域在点击时保持活动状态，因为mouseout方法会覆盖它。

我对此做了一些研究，但无法找到解决方案，为什么在悬停时删除类不起作用。我遇到了addClass（）和removeClass（）函数的错误。问题是我有这些功能在悬停或鼠标悬停/鼠标移动和点击时触发，所以它有点令人困惑。以下是我与之合作的演示：JSFiddle。

Full screen以获得更好的观点。

我的JavaScript可能有点凌乱，但最终还是假设可行的方式：

1。如果您将鼠标悬停在地图上的某个点上，则左侧红色框中的内容应显示与该位置相关的内容以及“工具提示”＆＃39 ;的位置名称。（这部分有效）

2。你将鼠标移出去，假设回到地点列表并且工具提示消失了。几乎像重置一样。

3. 现在，如果您点击该点，则工具提示和左侧内容都应保持有效状态。直到您点击＆＃34;返回列表＆＃34;链接在红色框上或悬停在其他点上。（这也有效）

我遇到的错误是你点击列表面板并在一段时间后悬停在几个位置点上，而当你将鼠标悬停在几个位置上时悬停状态保持活动状态（不会发生这种情况）。当您将鼠标悬停在地图上的位置点之外时，一切都会回到列表面板。

    $('a.location').click(function (event) {
    var loc = this.id;
    if ($('div.panel').hasClass('list')) {
        $('div.' + loc).removeClass('current');
        $('.list').addClass('current');
    }
    $('.list').removeClass('current');
    $('div.panel.' + loc).addClass('current');
    event.preventDefault();
}); //click function
$('.back-list').click(function (e) {
    $('.panel').removeClass('current');
    $('.list').addClass('current');
    $('div.location-title.show').removeClass('show').addClass('hide');
    $('div.location-title.view').removeClass('view');
    e.preventDefault();
}); //back button


$('ul.locations li > a').hover(function () {
//show location hover
var dot = this.id;
$('div.location-title.' + dot).removeClass('hide').addClass('show');

}, function () {
    var dot = this.id;
    //hide location hover
    $('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
    var dot = this.id;
    if (!$('div.location-title.' + dot).hasClass('hide')) {
        $('div.location-title.' + dot).addClass('view');
    } else {
        $('div.location-title.' + dot).removeClass('view');
    }
    event.preventDefault();
});

$('.map__container > span').on({
mouseover: function () { //mouseover
    var loc = $(this).attr('class');
    $('.panel').siblings().removeClass('current'); //resets all classes that have current
    $('.list').removeClass('current');
    $('div.panel.' + loc).addClass('current');
    $('div.show').removeClass('show').addClass('hide');
    $('div.location-title.' + loc).removeClass('hide').addClass('show');
    var asb = $('.location-title').siblings();
    $('div.location-title').siblings().removeClass('view');
},
mouseout: function () { //mouseout
    var loc = $(this).attr('class');
    $('div.' + loc).removeClass('current');
    $('div.location-title.' + loc).removeClass('show').addClass('hide');
    if (!$('div.' + loc).hasClass('current')) {
        $('.list').addClass('current');
    } else {
        $('.list').addClass('current');
    }
},
click: function () {
    $(this).off('mouseout');
    var loc = $(this).attr('class');
    $('div.location-title.show').removeClass('show').addClass('hide');
    $('div.location-title.' + loc).removeClass('hide').addClass('show');
}
});

另外，如果您有更好的建议来清理我的JavaScript，我会全力以赴。非常感谢！

Answer 1

如果我理解正确，您可能想尝试使用Mouseleave事件，我将使用模块化函数toggleClass：

ToggleClass function Jquery

Mouseleave explanation:

mouseleave: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
   if (!$('div.' + loc).hasClass('current')) {
      $('.list').addClass('current');
   } else {
      $('.list').addClass('current');
}
},

我希望可以帮助您。拜！

Answer 2

最终编辑：我在codepen找到了更好的解决方案，更简单。一个demo的工作功能。

我的问题出现在上面的代码示例中$(this).off('mouseout');在点击时删除了mouseout。因此，如果您要将鼠标悬停在地图上的那个点上，并将鼠标移开工具提示＆＃39;会保持活跃状态，当你输出鼠标时它不会消失，它会消失。我无法找到再次绑定它的方法，所以toggleClass（）要好得多。我一直在拉我的头发！

 $('.map__container span').click(function(mapIcon){
                    mapIcon.preventDefault();
                    var icon = $(this).attr('class');  
                    var panel = $(this).attr('class');  

                    $('.panel').removeClass('clicked');
                    $('.location-title').removeClass('clicked');
                    $('.panel.' + panel).addClass('clicked');
                    $('.location-title.' + icon).addClass('clicked');
                });                
                //Show bubbles over dots on map
                $('.map__container span').hover(function(){
                    var hoverdot = $(this).attr('class');

                    $('.location-title.' + hoverdot).toggleClass('selected');
                });
                //Show bubbles on hover over anchor links
                $('a.location').hover(function(){
                    var hoverlink = this.id;

                    $('.location-title.' + hoverlink).toggleClass('selected');
                });
                //Anchor links show panels and bubbles
                $('a.location').click(function(e){
                    e.preventDefault();
                    var panel = this.id;
                    var icon = this.id;

                    $('.panel').removeClass('clicked');
                    $('.location-title').removeClass('clicked');
                    $('.panel.' + panel).addClass('clicked');
                    $('.location-title.' + icon).addClass('clicked');                        
                });
                //back button
                $('.back-list').click(function(backButton) {
                     backButton.preventDefault();

                    $('.panel').removeClass('clicked');
                    $('.location-title').removeClass('clicked');
                    $('.list').addClass('clicked');                              
                });

Click事件可防止mouseout触发

2 个答案: