Javascript 显示第二个div时切换div

我想在显示第二个div时显示隐藏的div。第二个div是一个下拉列表，当有人单击菜单项时，它会更改类。我首先尝试在hover上显示隐藏的div，但随后它就不会显示到下拉列表中。然后我试着用click来调整它，但是当我在菜单项周围单击时，它就不同步了。我的问题是，我是否可以显示与第二个div相关的div。或者如果我需要深入研究改变第二个div类的javascript，并在那里添加我的第一个div

我试过的脚本：

$('document').ready(
    function() {
        $('a.megamenu_drop').mouseover(function(){
            $('#site-overlay').show();
        })
        .mouseout(function(){
            $('#site-overlay').hide();
        });
    });

修改代码：

如您所见，悬停时会显示隐藏的div站点覆盖。我想在下拉列表处于活动状态时显示此div

这是一个正确的方法吗？菜单中我的li元素正在得到一个活跃的类，我正试图以此为目标。此脚本在控制台中工作，但不是实时的。我想我不能只在页面加载就可以工作了

$('document').ready(
function() {
if($('li').hasClass('active')) {
 $("#site-overlay").addClass("active");
 }
 });

---

更新答案：我刚才看到了您的小提琴示例。我在CSS中做了一些修改

.megamenu > li .megamenu_drop{
    padding-top: 21px;
}

jQuery：

$("a.megamenu_drop,.dropdown_fullwidth").hover(
            function () {
                $("#site-overlay").show();
            },
            function () {
                $("#site-overlay").hide();
            }

        ); 

在这里结账 如果这是你想要的，请告诉我

由于您是在单击时打开下拉列表，因此更好的方法是仅在下拉列表处于活动状态时显示站点覆盖

$(".dropdown_fullwidth").hover(
                function () {
                    $("#site-overlay").show();
                },
                function () {
                    $("#site-overlay").hide();
                }

            ); 

---

解析您的问题非常困难，而且您的代码示例非常多。试着把它分解成小块，用不同的方式问你的问题，以便有更好的机会得到别人的帮助。就目前而言，我不知道我应该在你的小提琴上看到什么，也不知道你想要的行为是什么。对此我很抱歉。删除了代码，希望能更好地解释它@Palpatim@Xeptor检查我下面的答案，让我知道这是否有效。你展示的小提琴示例不起作用？我希望div站点覆盖显示在下拉列表处于活动状态时，它会设置覆盖，以便菜单显示得更好。小提琴有点错误，因为真正的菜单有一个切换功能。单击它，下拉列表将从“显示无”转到“块”。当这种情况发生时，我希望覆盖div也显示出来@我很抱歉。你的意思是当你的菜单处于活动状态时，你想有一个灰色的背景吗？基本上是的。我想显示站点覆盖div，这是一个黑色透明的背景。检查小提琴，让我知道这是否有用：）这正是我想要的，这就是我的位置：D。问题是你悬停按钮，覆盖显示，很好，但是你进入大菜单，然后覆盖就消失了。因此，我已将megamenu设置为仅在单击时显示。菜单脚本将下拉列表设置为在单击时显示，我希望根据下拉列表类显示覆盖，以使其正常工作。你可以在这里看到现场菜单：shop.xeptor.se。