AJAX06
1653 ワード
JQueryアプリケーション例2:ポップアップメニュー
<!DOCTYPE html>
<html>
<head>
<title>JQuery 2： </title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="js/jquerymenu.js"></script>
<link type="text/css" rel="stylesheet" href="css/menu.css" />
</head>
<body>
<dl>
<dt><a href="#"> 1</a><dt>
<dd><a href="#"> 1</a></dd>
<dd><a href="#"> 2</a></dd>
</dl>
<dl>
<dt><a href="#"> 2</a></dt>
<dd><a href="#"> 3</a></dd>
<dd><a href="#"> 4</a></dd>
</dl>
</body>
</html>// ， ，
// ， ， onclick
//
$(document).ready(function() {
var as = $("dt");
// var as = $("dl > dt");
as.click(function() {
var aNode = $(this);
var lis = aNode.nextAll("dd");
//
lis.toggle("show");
});
});dd {
display: none; /* */
}
a {
text-decoration: none; /* */
}