解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    div{ width:200px; height:200px; background:#9CF; display:none;}
    .bg{ background:#33FF00}
    </style>
    <script src="http://cloud.xing-xing.com/jquery.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
    $("ul li").hover(function(){
    $(this).addClass('bg')
    },function(){
    $(this).removeClass('bg');
    })
    $("ul li").click(function() {
            $(this).removeClass('bg').unbind('hover');
    $(this).find("div").slideDown();
        });})
    </script>
    </head>
    <body >
    <ul>
    <li>111111<div></div></li>
        <br />
        <li>222222<div></div></li>
        <br />
        <li>333333<div></div></li>
        <br />
        <li>444444<div></div></li>
        <br />
        <li>555555<div></div></li>
    </ul>
    </body>
    </html>
      

  2.   


    可以在当div显示时同时对li设置个优先级高的css样式class。这样在hover事件设置的优先级较低的css样式class就无效了。你可以看看css样式优先级之类的资料
    也可以反过来想
    在hover事件中判断div是否显示来决定改不改变css样式