javascript - 使 jquery ui Accordion 水平

Question

我正在使用 jquery ui Accordion 向用户查看不同的数据，它按照 jquery ui/demos 中的描述完美地工作，但是我想要实现的是改变滑动效果的效果，而不是上下滑动，我想让它左右滑动(如图像目录，本页中的视觉设计 http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1 )那么可以这样做吗？javascript:

$(function() {
                $("#accordion").accordion({autoHeight:false, collapsible: true, navigation: true,
                    clearStyle: true,
                    change: function(event, ui) {
                        resize_iframe();
                    }
                });
            });

代码:

echo '<div id="accordion">';
        while ($r = mysql_fetch_assoc($get_role)) {
            $role = $r['role'];
            if ($role == 'author') {
                echo '<h3><a href="#">Author</a></h3>';
                echo "<div>";
                AuthorView($member_id, $conference_id, $start, $end, $today);
                echo "</div>";
            } else if ($role == 'organizer') {
                echo '<h3><a href="#">Organizer</a></h3>';
                echo "<div>";
                OrganizerView($conference_id, $end);
                echo "</div>";
            } else if ($role == 'reviewer') {
                echo '<h3><a href="#">Reviewer</a></h3>';
                echo "<div>";
                ReviewerView($member_id, $conference_id, $start, $end, $today);
                echo "</div>";
            }
        }
        echo "</div>";

Answer 1

Hiya 2 个工作演示 最适合您的原因:http://jsfiddle.net/g4NLf/

-编辑- 9 月 5 日: 新演示: http://jsfiddle.net/g4NLf/ 或 http://jsfiddle.net/g4NLf/show

一个使用简单的 Accordion ，另一个使用一个小的库。

http://nicolahibbert.com/demo/liteAccordion/

希望对您有所帮助! :)

HTML 在演示链接中，但如果您需要，我可以将其粘贴到这篇文章中；也请让我知道它是否对您有帮助!

代码

$('.accordion').accordion({collapsible:true,active:false});

或

$(function(){
    $('#one').liteAccordion({
                        containerWidth:400,
                        autoPlay : true,
                        pauseOnHover : true,
                        theme : 'dark',
                        rounded : true,
                        enumerateSlides : true                    
                })

})

脚本

<script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>


<link href="http://nicolahibbert.com/demo/liteAccordion/css/liteaccordion.css" rel="stylesheet" />
​