Question

我希望在显示第二个div时显示隐藏的div。第二个div是一个下拉列表，当有人点击menuitem时会更改类。我首先尝试在悬停时显示隐藏的div，但之后它不会显示到下拉列表。然后，我尝试通过点击进行toogle，但是当点击菜单项时，它会不同步。我的问题是，我是否可以显示与第二个div更改类相关的div。或者，如果我需要深入改变第二个div类的javascript，并以某种方式添加我的第一个div？

我试过的脚本：

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

摆弄代码：https://jsfiddle.net/Jerryskate/doxdmxmL/

如您所见，在悬停时会显示隐藏的div site-overlay。我希望在下拉列表处于活动状态时显示此div。

这可能是一个正确的方法 - 菜单的我的li元素正在获得一个活跃的类，我试图瞄准它。此脚本在控制台中工作，但不是实时的。我想我不能只在页面加载它加载它？

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

Answer 1

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

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

jQuery的：

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

        );

点击此处https://jsfiddle.net/YameenYasin/doxdmxmL/13/ 如果这是你想要的，请告诉我。

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

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

            );

显示第二个div时切换div

1 个答案: