?
?
?
?
?以上为效果及素材
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>悬浮点击事件</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .wrap{ width: 800px; margin: 0 auto; } .nav{ float: left; width: 200px; margin-right: 10px; } .nav ul{ border: 1px solid green; } .nav dt{ background: #efefef; font-size: 16px; padding-left: 15px; color: #666; line-height: 35px; border-bottom: 1px solid #fff; cursor: pointer; border-radius: 10px; margin: 20px 10px 10px 10px; } .nav dd a{ line-height: 30px; font-size: 14px; color: #666; text-decoration: none; } .nav dd{ padding-left: 15px; display: none; } .nav dl dt img{ width: 30px; height: 15px; display: inline-block; float: right; margin-top: 10px; } </style> <script src="../JS/jquery-1.8.3.min.js"></script> </head> <body> <div class="wrap"> <nav class="nav"> <ul> <li> <dl> <dt>什么是HTML？<img src="../img/down2.png" alt=""></dt> <dd><a href="#">HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</a></dd> </dl> </li> <li> <dl> <dt>什么是JAVA？<img src="../img/down2.png" alt=""></dt> <dd><a href="#">Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。</a></dd> </dl> </li> <li> <dl> <dt>什么是JavaScript？<img src="../img/down2.png" alt=""></dt> <dd><a href="#"> JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。</a></dd> </dl> </li> <li> <dl> <dt>什么是JavaOOP <img src="../img/down2.png" alt=""></dt> <dd><a href="#">OOP全称Object Oriented Programming，是指面向对象程序设计，是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。 面向对象编程技术的关键性观念是它将数据及对数据的操作行为放在一起，作为一个相互依存、不可分割的整体——对象。</a></dd> </dl> </li> </ul> </nav> </div> </body> <script> $(document).ready(function () { $(".nav dt").toggle(function () { $(this).siblings().slideDown("slow"); var imgSrc = $(".nav dt").index(this); $(".nav dt:eq("+imgSrc+") img").attr("src","../img/up2.png") },function () { $(this).siblings().slideUp("slow"); var imgSrc = $(".nav dt").index(this); $(".nav dt:eq("+imgSrc+") img").attr("src","../img/down2.png") }); $(".nav dt").hover(function () { $(this).css({"background":"greenyellow","box-shadow":"2px 2px grey"}); },function () { $(this).css({"background":"","box-shadow":"2px 2px white"}); }) }) </script> </html>