jQuery 折叠菜单

本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码,主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧。

效果图:

jQuery 折叠菜单_第1张图片

jQuery 折叠菜单_第2张图片

源码:

html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery 折叠菜单title>
    <script type="text/javascript" src="jquery.1.12.4.js">script>
    <style type="text/css">
        * { margin:0px; padding:0px; }
        body {font-size:14px; }
        ul, li, h1, div{ list-style:none; padding:0px; margin:0px; }
        .content { width:596px; _height:430px; min-height:430px; margin:0 auto; border:2px solid #AAAA00;background-color:#FFFFFF; overflow:hidden; }
        .toggle { width:450px; margin:20px auto; }
        .toggle dl dt { height:40px; width:450px;line-height:40px;background: #b3d4fc; font-size:16px; font-weight:bold; color:#006600; cursor:pointer; margin:8px 0; padding-left:25px; display:block; }
        .toggle dl dd { padding-left:10px; line-height:24px;}
        .toggle dl dd h2 { font-size:15px; }
        .toggle dl dd ul { padding-bottom:12px; }
        .toggle dl dd ul li { list-style:none; }
    style>
    <script type="text/javascript">
        $(function(){
            $(".toggle dl dd").hide();
            $(".toggle dl dt").click(function(){
                $(".toggle dl dd").not($(this).next()).hide();
                $(".toggle dl dt").not($(this).next()).removeClass("current");
                $(this).next().slideToggle(500);
                $(this).toggleClass("current");
            });
        });
    script>
head>
<body>
<div class="content">
    <div class="toggle">
        <dl>
            <dt>项目一dt>
            <dd>
                <ul>
                    <li>项目一、一li>
                    <li>项目一、二li>
                    <li>项目一、三li>
                ul>
            dd>
            <dt>项目二dt>
            <dd>
                <ul>
                    <li>项目二、一li>
                    <li>项目二、二li>
                    <li>项目二、三li>
                ul>
            dd>
            <dt>项目三dt>
            <dd>
                <ul>
                    <li>项目三、一li>
                    <li>项目三、二li>
                    <li>项目三、三li>
                ul>
            dd>
        dl>
    div>
div>
body>
html>

你可能感兴趣的:(JavaScript)