显示/隐藏基于<li> .hover的<div>

问题描述

|| 我正在创建一个菜单，该菜单将通过

.slideDown()

显示一个

<div id=\"menuDiv\">

，基于该ID，光标位于

<div id=\"menuDiv\">

\s4ѭ的

<li>

中。另外，当光标从

<div id=\"menuContainer\">

中移出时，ѭ1应为

.slideUp()

，但当光标向下移至

<div id=\"menuDiv\">

自身上方时除外。 我有这个标记：

   <div id=\"menuContainer\">
   <!-- this is styled to be your standard CSS <ul> menu (<ul>\'s list-style: none; <li> float: right) -->
        <ul>
            <li id=\"overSlide1\"><a href=\"#1\" class=\"linkClass\">Alpha</a></li>
            <li id=\"overSlide2\"><a href=\"#2\" class=\"linkClass\">Beta</a></li>
            <li id=\"overSlide3\"><a href=\"#3\" class=\"linkClass\">Gamma</a></li>
            <li id=\"overSlide4\"><a href=\"#4\" class=\"linkClass\">Theta</a></li>
        </ul>
    </div>
    <div id=\"menuDiv\">
    <!-- This is position right under the <div id=\"menuContainer\"> via CSS -->
    </div>

并为Jquery做到了：

$(document).ready(function(){
    $(\"#overSlide1\").hover(function(){
        $(\"#menuDiv\").slideDown(250,function(){
        });
    },function(){

    });

    $(\"#overSlide2\").hover(function(){
        $(\"#menuDiv\").slideUp(250,function(){

    });

    $(\"#overSlide3\").hover(function(){
        $(\"#menuDiv\").slideDown(250,function(){

    });

    $(\"#menuDiv\").hover(function(){

    },function(){
        $(this).slideUp(75);
    });
});

我遇到了“除了光标移到down1ѭ本身之外的问题”的问题。     

解决方法

        尝试这个

$(document).ready(function(){
    $(\"#overSlide1\").mouseover(function(){
        $(\"#menuDiv\").slideDown(250,function(){
        });
    };

    $(\"#overSlide1\").mouseout(function(){
        $(\"#menuDiv\").slideUp(250,function(){
        });
    };
 $(\"#overSlide2\").mouseover(function(){
        $(\"#menuDiv\").slideDown(250,function(){
        });
    };

    $(\"#overSlide2\").mouseout(function(){
        $(\"#menuDiv\").slideUp(250,function(){
        });
    };

 $(\"#overSlide3\").mouseover(function(){
        $(\"#menuDiv\").slideDown(250,function(){
        });
    };

    $(\"#overSlide3\").mouseout(function(){
        $(\"#menuDiv\").slideUp(250,function(){
        });
    };

 $(\"#overSlide4\").mouseover(function(){
        $(\"#menuDiv\").slideDown(250,function(){
        });
    };

    $(\"#overSlide4\").mouseout(function(){
        $(\"#menuDiv\").slideUp(250,function(){
        });
    };

});

这可能是个小问题，jquery有时无法按预期工作。如果这对您不起作用，则还有其他方法，与您已经拥有的方法相比，这只是最简单的方法。请告诉我，我会提供更多帮助。