Javascript JS/jquery新手，div没有像我期望的那样隐藏（或者不正确地取消隐藏）

你可以在网站上看到这个问题。单击位置名称会在左下角显示“主页”按钮。单击该主页按钮将返回到原始页面加载布局，并应隐藏主页按钮。但是，一旦光标移离“主页”按钮，它就会重新出现并返回其悬停行为（单独定义）

html:

如果您需要查看更多代码来回答此问题，请告诉我。请随时告诉我为什么其他事情看起来也不对/愚蠢

---

谢谢

如果在

#home.click（）的最后一部分中放置断点，您会看到它是隐藏的。在继续之前，您可以将鼠标移到屏幕外，然后隐藏按钮。在
$（“#home”）.fadeTo（100,0.5）}
附近放置另一个断点，当鼠标悬停在页面上时，会调用该断点，从而自动显示主页按钮。检查jQuery时，它似乎位于mouseout上，可能是悬停机制的一部分。
正如评论中所建议的，使用更多的CSS而不是JS

看看这是否能让你开始：

#home, .navitem {
    cursor: pointer;
}

#home {
    opacity: 0.5;
    -webkit-transition: opacity linear 100ms;
}
#home:hover {
    opacity: 1;
}

#navbar.docked {
    top: auto;
    left: 0px;
    ....
}

JS

首先，我认为你可以通过css做悬停

如果希望保留jquery hover函数，那么必须在click事件中解除mouseleave事件的绑定，或者简单地向元素添加一个“clicked”类

对于第二种方法，我做了一些改进

通过单击.navitem（在名为.clickme的小提琴中）使主页按钮可见

单击“再次隐藏菜单”并添加“单击”类

    $('.menu').on('click', function (e) {
    e.preventDefault();
    $(this).attr('style', '');
    $(this).addClass('clicked').hide();
});

悬停时检查其是否已单击：

if (!$(this).hasClass('clicked'))...

尝试使用CSS转换来实现悬停效果，而不是jQuery。我认为问题在于，当您单击“主页”按钮时，会触发
单击
和
悬停
处理程序，并且
悬停
会在
单击
隐藏动画后继续运行。我建议您尝试放置
$（“#主页”）.hide（）
作为
$（“#home”）中的最后一个状态。单击（）
方法。如果这不起作用，请在上重新创建您的问题并共享链接，以便我们可以修补它。谢谢大家。我将方法切换到CSS，解决了这个问题。我仍然不太清楚为什么JS不起作用，但我想这并不重要。
function attach_nav() {
    $('.navitem').click(function(){
        $('#navbar').addClass('docked');
    });

$('.clickme').on('click', function (e) {
    e.preventDefault();
    $('.menu').removeClass('clicked').show();
});

    $('.menu').on('click', function (e) {
    e.preventDefault();
    $(this).attr('style', '');
    $(this).addClass('clicked').hide();
});

if (!$(this).hasClass('clicked'))...