个人中心
gpt4 book ai didi

javascript - 应关闭使用 jquery div 的 Accordion

转载 作者：太空宇宙 更新时间：2023-11-03 18:34:02 27 4
gpt4 key购买 nike

下面是 Accordion 的代码，我希望页面加载默认关闭的所有部门，当我单击特定部门时它会打开，当我单击其他部门时它会打开而前一个部门会自动关闭。注意它应该与ie8兼容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--  <link href="css.css" rel="stylesheet" />-->
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="accord.js"></script>
    <style>
        .wrap {
            margin-left: 0px;
            margin-top: 0px;
            width: 100px;
        }

        .accordion1 {
            width: 178px;
            margin: 0px;
            padding: 0px;
            list-style: none;
            border: 1px solid #ddd;
        }

            .accordion1 h2 {
                font-size: 12px;
                font-weight: bold;
                font-family: Arial, Helvetica, sans-serif;
                margin: 0px;
                text-decoration: none;
                padding: .25em .25em .25em 2em;
                color: #333;
                background: url('compo_images/gradient_v_gray.gif') repeat-x;
                background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
                border-bottom: 1px solid #ddd;
                cursor: pointer;
            }

                .accordion1 h2:hover {
                    background: url('compo_images/gradient_v_orange.gif') repeat-x;
                    color: white;
                }

            .accordion1 li div.content {
                padding: 3px;
                background: #fcfbfb;
                border-bottom: 1px solid #ddd;
                /*border: 1px solid #ddd;*/
            }

            .accordion1 li:hover h2 {
                color: white;
                background-image: url("./compo_images/arrow_exp_n.gif");
                background: url('compo_images/gradient_v_orange.gif') repeat-x;
            }

        .accord > li {
            padding: 0;
            list-style-type: none;
        }

            .accord > li > a {
                text-decoration: none;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                padding-left: 12px;
                color: #5f5c5c;
                background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
            }

            .accord > li > ul > li > a {
                text-decoration: none;
                color: #5f5c5c;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 11px;
                background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
                padding-left: 17px;
            }

            .accord > li > ul {
                list-style-type: none;
                text-align: left;
                margin: 0;
                padding: 1px;
            }

        .accord {
            text-decoration: none;
            padding-left: 5px;
        }

            .accord > li > a:hover {
                color: #f8b106;
            }

            .accord > li > ul > li > a:hover {
                color: #f8b106;
            }
    </style>
</head>

<body>
    <div class="wrap">

        <ul class="accordion1">
            <li>
                <h2 id="first">CMT</h2>
                <div class="content">
                    <ul class="accord">
                        <li>
                            <a href="#">main link1</a>
                            <ul>
                                <li><a href="#">Link One</a></li>
                                <li><a href="#">Link Two</a></li>
                                <li><a href="#">Link Three</a></li>
                                <li><a href="#">Link Four</a></li>
                                <li><a href="#">Link Five</a></li>
                            </ul>
                        </li>

                        <li>
                            <a href="#">main link2</a>
                            <ul>
                                <li><a href="#">Link One</a></li>
                                <li><a href="#">Link Two</a></li>
                                <li><a href="#">Link Three</a></li>
                                <li><a href="#">Link Four</a></li>
                                <li><a href="#">Link Five</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <h2>FOIS</h2>
                <div class="content">
                    content fois
                </div>
            </li>
            <li>
                <h2>ASP</h2>
                <div class="content">
                    content ASP
                </div>
            </li>
            <li>
                <h2>PTT</h2>
                <div class="content">
                    content PTT
                </div>
            </li>
        </ul>
    </div>
    <!-- wrap -->
</body>
</html>

下面是accord.js

jQuery(function ($) {
    $('.accord li').hover(function () {
        $(this).find('ul').stop(true, true).slideDown()
    }, function () {
        $(this).find('ul').stop(true, true).slideUp()
    }).find('ul').hide()

})

最佳答案

尝试

var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
$lis.children('h2').click(function(){
    var $t = $(this).next();
    $contents.not($t).stop(true, true).slideUp();
    $t.slideToggle();
})

演示:Fiddle

关于javascript - 应关闭使用 jquery div 的 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19152255/

27 4 0
文章推荐： python - 多处理管理器进程不释放内存
文章推荐： list - Cons 元素列出 vs Cons 列表到 Scheme 中的元素
文章推荐： LISP 社区和网络框架
文章推荐： css - 调整大小时不显示导航折叠按钮
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com