溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果圖：
全部代碼：
<!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></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 15px;
padding: 100px;
}
.menu
{
width: 500px;
border-bottom: solid 1px gray;
}
.menu h4
{
border: solid 1px gray;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding: 0 5px;
border-bottom: none;
cursor: pointer;
}
.menu p
{
border-left: solid 1px gray;
border-right: solid 1px gray;
padding: 5px 0;
padding-left: 5px;
}
.changecolor{background-color:red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".menu p:not(:first)").hide();
$(".menu h4").css("background", "#ccc");
// $(".menu h4").hover(function () { $(this).addClass("changecolor"); }, function () { $(this).removeClass("changecolor"); });
// $(".menu h4").click(function () { $(this).css("background", "red").next("p").show().siblings().hide(); });
$(".menu h4").hover(function () { $(this).css("background-color", "gray").siblings("h4").css("background-color", "#ccc"); })
$(".menu h4").mouseleave(function () { $(".menu h4").css("background", "#ccc") }); //離開時將其變為原來顏色
var index = $(".menu h4").index(this);
$(".menu h4").click(function () { $(this).next("p").slideToggle().siblings("p").slideUp(); });
});
</script>
</head>
<body>
<div class="menu">
<h4>
我的好友</h4>
<p>
周杰倫<br />
×××</p>
<h4>
我的朋友</h4>
<p>
李連杰<br />
本拉登</p>
<h4>
陌生人</h4>
<p>
比爾蓋茨<br />
阿嬌</p>
</div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
