jsの例-左メニュー
12382 ワード
span style="color:#e8bf6a;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<script type="text/javascript" src="js/jquery.js">script>
<style type="text/css">
.menu{
height: 600px;
width: 30%;
float: left;
}
.item{
margin-top: 5px;
}
.title{
border: 1px solid #35ce96;
line-height: 40px;
color: #2DB3DD;
width: 200px;
height: 40px;
top: 10px;
}
.title:hover{
cursor: pointer;
color: #6bff68;
font-size: 18px;
}
.content ul{
padding: 0;
margin: 0;
}
.content li{
list-style: none;
border: 1px solid #FFDE7F;
line-height: 30px;
height: 30px;
width: 150px;
}
.hide{
display: none;
}
style>
head>
<body>
<div class="edit">
<div class="menu">
<div class="item">
<div class="title" id="caidan1"> div>
<div class="content hide">
<ul>
<li>111li>
<li>111li>
<li>111li>
ul>
div>
div>
<div class="item">
<div class="title" id="caidan2"> div>
<div class="content hide">
<ul>
<li>222li>
<li>222li>
<li>222li>
ul>
div>
div>
<div class="item">
<div class="title" id="caidan3"> div>
<div class="content hide">
<ul>
<li>333li>
<li>333li>
<li>333li>
ul>
div>
div>
div>
div>
<script>
function Show(self) {
$(self).next().removeClass("hide").parent().siblings().children(".content").addClass("hide");
}
$("#caidan1").click(function () {
Show(this);
});
$("#caidan2").click(function () {
Show(this);
});
$("#caidan3").click(function () {
Show(this);
});
script>
body>
html>