下拉框

最新推荐文章于 2023-02-24 09:53:09 发布

xuganggogo

最新推荐文章于 2023-02-24 09:53:09 发布

阅读量65

点赞数

分类专栏： ajax/jquery 文章标签： jQuery JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/xuganggogo/article/details/83364363

版权

ajax/jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-3</title>
<style>
#menu {
         width:300px;
}
 .has_children{
         background : #555;
         color :#fff;
         cursor:pointer;
 }
 .highlight{
         color : #fff;
         background : green;
 }
 ul{
         list-style:none;
         padding:0;
 }
 ul li{
         background : #888;
         display : none;
 }
 </style>

<!-- 引入 jQuery -->
<script src="lib/jquery.js" type="text/javascript"></script>

<script type="text/javascript" >
$(document).ready(function(){    //等待dom元素加载完毕.

        $(".has_children").click(function(){
        $(this).addClass("highlight").children("li").show().end().siblings().removeClass("highlight").children("li").hide();
        });

        $('.has_children1').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
})
</script>

</head>
<body>

<div id="menu">

         <ull class="has_children1"> <dt> 第1章-认识一下jQuery </dt>
                <dd> <li>1.1-jQuery简介</li>
                  <li> 1.2-加入jQuery</li>
                   <li>1.3-编写jQuery代码</li>
                   <li>1.4-jQuery对象和DOM对象</li>
                   <li>1.5-解决jQuery和其它库的冲突</li>
                   <li>1.6-小结</li>
                 </dd>
         </ull>

         <ul class="has_children">第2章-jQuery之选择器
                   <li>2.1-什么是选择器</li>
                   <li>2.2-jQuery选择器的优势</li>
                   <li>2.3-jQuery选择器</li>
                   <li>2.4-选择器中带特殊符号的处理</li>
                   <li>2.5-javascript中的一些对比操作势</li>
                   <li>2.6-做一个图片展示效果</li>
                   <li>2.7-小结</li>
         </ul>

         <ul class="has_children">第3章-jQuery之DOM操作
                   <li>3.1-介绍DOM操作的重要性</li>
                   <li>3.2-jQuery的DOM操作</li>
                   <li>3.3-打造一个图片馆</li>
                   <li>3.4-小结</li>
         </ul>

</div>
</body>
</html>

xuganggogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉框

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;..
复制链接

扫一扫

专栏目录