Question

我已经通过jquery和css制作了手风琴。一切都很好，但我不能使用过渡缓慢崩溃。因为当它崩溃时，它会快速崩溃，而当它关闭时，它会非常快地关闭。我不能使用过渡。

我的demo

这是我的代码......

HTML -

<div class="accordiam">
            <div class="child_bg">
                <h2 class="title_headig"><a href="javascript:void(0)">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h2>
                <div class="accordiam_body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>
                </div>
            </div>
            <div class="child_bg">
                <h2 class="title_headig"><a href="javascript:void(0)">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h2>
                <div class="accordiam_body active">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>
                </div>
            </div>
            <div class="child_bg">
                <h2 class="title_headig"><a href="javascript:void(0)">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h2>
                <div class="accordiam_body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>
                </div>
            </div>
        </div>

的CSS -

.accordiam
            {
                width:800px;
            }
            h2
            {
                margin:0;
                padding: 0;
            }
            .child_bg
            {margin: 1px 0 0 0;}
            .title_headig a
            {
                padding:8px 20px;
                background:#999900;
                font-size: 18px;
                font-family: monospace;
                text-decoration: none;
                color:#fff;
                z-index: 500;
                display: block;
                position: relative;
                margin:0;
                line-height: 28px;
            }
            .accordiam_body
            {
                width:96.6%;
                background:#fff;
                line-height: 25px;
                height:auto;
                border: 1px solid #999;
                padding:0px 0px 0px 25px;
                transition:all .5s;
                display:none;
            }

             .accordiam_body.active
            {
                display: block;
            }

的jquery -

 $(document).ready(function(){
                $(".title_headig a").click(function(){
                    $(".accordiam_body").hide();
                    $(this).parent().parent().children(".accordiam_body").slideToggle(000);
                });
            })

Answer 1

你可以进行切换效果＆＃34;慢＆＃34;，但你需要删除你在css中的转换

slideToggle("slow");

slideToggle的文档：http://api.jquery.com/slidetoggle/

https://jsfiddle.net/e98d9t3g/1/

手风琴中的过渡效果由我创造

1 个答案: