1

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

图 1：米歇尔·梅克尔约翰 / FreeDigitalPhotos.net

图 2：Luigi Diamanti / FreeDigitalPhotos.net

图片 3：蒂娜·菲利普斯 / FreeDigitalPhotos.net

图 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>
4

4 回答 4

1

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

    $(function() {
        $('#accordion > li').hover(
            function () {
                $('#accordion').accordion('option', 'active', $(this).index());
            },
            function () {
                $('#accordion').accordion('option', 'active', false);
            }
        );
    });
于 2013-06-21T08:43:40.437 回答
0

您在鼠标移出时隐藏了当前元素。现在您不能对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); 
    });
});

现场演示

于 2013-06-21T08:57:49.940 回答
0

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

根据 jquery 手风琴的 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
          }
    );
});

例子

于 2013-06-21T09:03:40.827 回答
0

尝试这个

<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>
于 2013-06-21T09:06:08.277 回答