<script type="text/javascript" src="jquery_2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert("test");
$("#menu li").mouseover(function(){
//alert("test");
$(".box1",this).slideDown(200);
});
$(".box1 li").hover(function(){
$(".box1 p").css({
"display":"none"
});
$("p",this).css({
"display":"block"
});
});
$("ul#menu").mouseout(function(){
$(".box1").css({
"display":"none"
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li class="navi_dai"><div class="wrap"><a href="#">navi1</a>
<div class="box1">
<ul>
<li id="navi1_1"><a href="#">navi1_1</a><p>ここが説明部分です1</p></li>
<li id="navi1_2"><a href="#">navi1_2</a><p>ここが説明部分です2</p></li>
<li id="navi1_3"><a href="#">navi1_3</a><p>ここが説明部分です3</p></li>
<li id="navi1_4"><a href="#">navi1_4</a><p>ここが説明部分です4</p></li>
</ul>
</div>
</div>
</li>
<li><a href="#">navi2</a></li>
<li><a href="#">navi3</a></li>
<li><a href="#">navi4</a></li>
<li class="clear"></li>
</ul>
</body>
</html>
No.1
2625
1149
167pt
$("#menu li").mouseover(function(){ //alert("test"); $(".box1:not(:animated)",this).slideDown(200); });
No.2
3214
167pt
こういうことがしたいのでしょうか
$(document).ready(function() { $("#menu li").mouseenter(function() { $(".box1", this).slideDown(200); }) $(".box1 li").hover(function() { $(".box1 p").css({ "display": "none" }); $("p", this).css({ "display": "block" }); }); $("#menu .wrap").mouseleave(function() { $(".box1").css({ "display": "none" }); }); });
56
55
2
1
1
コメント（0件)