Question

实际上正在研究这个手风琴，我想将这个手风琴悬停改为点击功能。但是当我知道我有一些错误..如果有人如何将悬停功能改为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

只需为手风琴调用活动API：

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

Answer 2

您在鼠标移出时隐藏了当前元素。现在，您无法使用click事件执行此操作，但您可以对未单击的其他元素执行操作。

因此，每当您点击一个时，之前单击的内容将显示在“除了我刚刚点击的所有内容之外的所有内容”列表中，这意味着siblings。

这可能就是你要找的东西：

$('#accordion li').click(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();

    //for each of the other ones I didn't click
    var siblings = $this.siblings();
    siblings.each(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); 
    });
});

Living demo

Answer 3

根据您的需要做一些改变。

根据jquery accordian的HTML更改：

            <div class="accordion" id="accordion">

                <div class="heading">Guler</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>

                <div class="heading">Phillips</div>

                <div class="description">

                    <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>
</div>

JS代码：

$(function() {
     $('#accordion').accordion({
         collapsible: true
          }
    );
});

example

Answer 4

试试这个

<script type="text/javascript">
    $(function() {
        $('#accordion > li').click(
            function () {
                var $this = $(this);
                $("#accordion li").find(".description:visible").slideUp(500);
                $("#accordion li").find(".bgDescription").stop(true,true).slideUp(700);
                $("#accordion li").find(".heading").stop(true,true).fadeIn();
                $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();
            });
    });


</script>

将悬停功能改为jquery手风琴中的onclick功能

4 个答案: