Jquery简单实现图书导航

最新推荐文章于 2024-12-17 15:58:27 发布

原创最新推荐文章于 2024-12-17 15:58:27 发布 · 2.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery

JQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在基本导航上应用jQuery动画，以创建更具吸引力的图书导航效果。通过添加一些简单的jQuery代码，可以实现导航条目的动态展示。

说的很玄乎其实就是在普通导航的基础上增加几个jquery动画而已。

代码

    <script type="text/javascript">
        var a = false;
        var b = false;
        $(document).ready(function () {
            $('#p1').click(function () {
                a ? $('#content').slideDown("slow") : $('#content').slideUp("slow");
                a ? $('#p1').text('↑') : $('#p1').text('↓');
                a ? a = false : a = true;
            })
            $('#p').click(function () {
                b ? $('ul:even').show('1000') : $('ul:even').hide('1000');
                b ? $('#p').text('简化') : $('#p').text('复杂');
                b ? b = false : b = true;
            })
        })
    </script>
</head>
<body>
<div><p><b>图书分类</b></p><p id='p1'>↓</p></div>
<div id='content'>
<ul><li>小说</li><li>文艺</li><li>青春</li></ul><br />
<ul><li>少儿</li><li>生活</li><li>社科</li></ul><br />
<ul><li>管理</li><li>计算机</li><li>教育</li></ul><br />
<ul><li>工具书</li><li>引进版</li><li>其他类</li></ul><br /><br />
<p id='p'>简化</p>
</div>

效果图