Javascript 使用JQuery下拉菜单淡出背景页面

我想创建一个dropdwon菜单，就像网站上的一样，当页面运行时，它会在后台淡出页面

到目前为止我想不出如何让背景褪色，有什么想法吗

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){

    }
);

$('#nav_menu').hover(
    function(){

    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

---

您可以通过添加一个新的

元素

来实现这一点，该元素将充当

后置效果

例如

将此代码放在
正文
标记的底部

<div class="back-drop"></div>

另外，添加
z-index:9999
到css中的
#nav_菜单

#nav_menu {
    position: absolute;
    display: block;
    height: 80px;
    width: 100%;
    background: orange;
    z-index: 9999;
}



将此代码添加到您的jquery代码中

$('.nav_menu_link_drop').hover(
        function() {
            $('.back-drop').css('display', 'block');
        },
        function() {
            $('.back-drop').css('display', 'none');

        }
);

另外，添加
$（'.back drop'）.css（'display'，'block'）
和
$（'.back-drop'）.css（'display'，'none'）到您的
$（'.content'）.hover（）

这是最新消息。



希望能有帮助

$('.nav_menu_link_drop').hover(
        function() {
            $('.back-drop').css('display', 'block');
        },
        function() {
            $('.back-drop').css('display', 'none');

        }
);

$('.content').hover(
        function() {
            $('.back-drop').css('display', 'block');
            stop = true;
        },
        function() {
            $('.back-drop').css('display', 'none');
        }
);