javascript - 将 jquery Accordion 中的悬停功能更改为 onclick 功能

Question

实际上我正在研究这个 Accordion ，我想将这个 Accordion 悬停更改为点击功能。但是当我改变时，我遇到了一些错误..如果有人如何将悬停功能更改为 onclick 功能...我将完整的代码粘贴在这里....

<script type="text/javascript">
        $(function() {
            $('#accordion > li').hover(
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'480px'},500);
                    $('.heading',$this).stop(true,true).fadeOut();
                    $('.bgDescription',$this).stop(true,true).slideDown(500);
                    $('.description',$this).stop(true,true).fadeIn();
                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'width':'115px'},1000);
                    $('.heading',$this).stop(true,true).fadeIn();
                    $('.description',$this).stop(true,true).fadeOut(500);
                    $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
            );
        });
    </script>   

Image 1: Michelle Meiklejohn / FreeDigitalPhotos.net

Image 2: Luigi Diamanti / FreeDigitalPhotos.net

Image 3: Tina Phillips / FreeDigitalPhotos.net

Image 4: Ahmet Guler / FreeDigitalPhotos.net

        <ul class="accordion" id="accordion">
            <li class="bg1">
                <div class="heading">Guler</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Guler</h2>
                    <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
                        nulla pariatur.</p>
                    <a href="#">more &rarr;</a>
                </div>
            </li>
            <li class="bg2">
                <div class="heading">Phillips</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Phillips</h2>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                        quae ab illo inventore veritatis et quasi architecto beatae vitae
                        dicta sunt explicabo. </p>
                    <a href="#">more &rarr;</a>
                </div>

            </li>
            <li class="bg3">
                <div class="heading">Diamanti</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Diamanti</h2>
                    <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
                        nulla pariatur.</p>
                    <a href="#">more &rarr;</a>
                </div>

            </li>
            <li class="bg4 bleft">
                <div class="heading">Meiklejohn</div>
                <div class="bgDescription"></div>
                <div class="description">
                    <h2>Meiklejohn</h2>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                        quae ab illo inventore veritatis et quasi architecto beatae vitae
                        dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni
                        dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <a href="#">more &rarr;</a>
                </div>

            </li>
        </ul>
    </div>

Answer 1

只需调用 Accordion 的事件 API:

    $(function() {
        $('#accordion > li').hover(
            function () {
                $('#accordion').accordion('option', 'active', $(this).index());
            },
            function () {
                $('#accordion').accordion('option', 'active', false);
            }
        );
    });