Question

我希望从http://www.inc.com/

实现放置和隐藏菜单效果

这是我当前的小提琴http://jsfiddle.net/elementhttp/56ThC/

    $("#1").mouseover(function(){  
    //alert("aaaaaaaaaa"); just for testing
    $(".block2").stop().fadeToggle(700);
     });
 $("#1").mouseout(function(){      
    $(".block2").stop().fadeToggle(700);
     });

$(".menu2").mouseover(function(){  
    //alert("aaaaaaaaaa"); 
    $(".con2").stop().fadeToggle(700);
     });
$(".menu2").mouseout(function(){      
    $(".con2").stop().fadeToggle(700);
     });

目前当您将鼠标悬停在菜单1上时，项目淡入淡出但不会显示

感谢您帮助解决这个谜团：D

Answer 1

由于您的子菜单不是顶级菜单的子项，因此每次将鼠标移出菜单时都会调用“mouseout”事件。

我修复了您的HTML，Javascript和CSS并清理了一些代码，以便为您提供示例（http://jsfiddle.net/56ThC/1/）。

<body>
<div class="block">
    <div class="box" id="1">
        menu1
        <div class="submenu" id="1">
            <div class="box2">item1_1</div>
            <div class="box2">item1_2</div>
            <div class="box2">item1_3</div>
            <div class="box2">item1_4</div>
            <div class="box2">item1_5</div>
         </div> 
    </div>
    <div class="box " id="2">
        menu2
        <div class="submenu" id="2">
            <div class="box2">item2_1</div>
            <div class="box2">item2_2</div>
            <div class="box2">item2_3</div>
            <div class="box2">item2_4</div>
            <div class="box2">item2_5</div>
         </div> 
    </div>
    <div class="box" id="3">
        menu3
    </div>
    <div class="box" id="4">
        menu4
    </div>
    <div class="box" id="5">
        menu5
    </div>

 </div>

使用Javascript：

$('.submenu').hide();


$(".box").hover(function(){  
    $(this).find(".submenu").stop().fadeToggle(700);
});

CSS：

.block{
    width: 615px;
    border: solid 1px #aaa;  
    text-align: center;  
    white-space: nowrap;  
    overflow: hidden;
}
.box{
    width: 100px;  
    height: 50px;  
    border: solid 1px #ccc;  
    display: inline-block;  
    vertical-align: middle;         
}   
.submenu{
    width: 615px;
    height:300px; 
    position:absolute;left:8px;top:60px;
    border: solid 1px #aaa;  
    text-align: center;  
    white-space: nowrap;  
    overflow: hidden;
            }
.box2{
    width: 200px;  
    height: 200px;  
    border: solid 1px #ccc;  
    display: inline-block;  
    vertical-align: middle;         
           }

希望这有帮助！

http://www.inc.com/ drop menu效果

1 个答案: