Javascript 使jqueryui保持水平

我使用jquery ui accordion向用户查看不同的数据，正如jquery ui/demos中所描述的那样，它工作得很好，但是我想要实现的是改变滑动效果的效果，这样我就不需要上下滑动，而是让它左右滑动（如本页中的图像catalouges、视觉设计）那么有可能做到这一点吗？ 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>";

echo'；
而（$r=mysql\u fetch\u assoc（$get\u role））{
$role=$r['role']；
如果（$role=='author'）{
回声'；
回声“；
AuthorView（$member\u id、$conference\u id、$start、$end、$today）；
回声“；
}else if（$role==“组织者”）{
回声'；
回声“；
OrganizerView（$conference_id，$end）；
回声“；
}else if（$role=='reviewer'）{
回声'；
回声“；
ReviewerView（$member\u id、$conference\u id、$start、$end、$today）；
回声“；
}
}
回声“；

Hiya2个工作演示适合您的原因：

-编辑-9月5日：新演示：或

一个用简单的手风琴，另一个用一个小琴库

希望这对你有帮助<代码>：）

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" />
​

​

查看

var空间=（$（窗口）.width（）-100）；
$（'.column'）。宽度（空格/4）；
$（“.column”）。单击（函数（）{
if（！$（this）.hasClass（'animated'））{
$（'.column'）.not（$（this.parent（））.dequeue（）.stop（）.animate（{width:'toggle'，opacity:'0.75'}，1750，'easeInOutQuint'，function（）{
});
}
$（this.addClass（'animated'）；
$（'.column'）.not（$（this，'.reveal'）.parent（））.dequeue（）.stop（）.animate（{width:'toggle'，opacity:'0.75'}，1750，'easeInOutQuint'，函数（）{
});
$（this）.dequeue（）.stop（）.animate({
宽度：（空格/4）
}，1400，'easeInOutQuint'，函数（）{
$（this.html（'reach'）；
});
$（'.reveal'）.dequeue（）.stop（）.animate({
宽度：'75vw'
}，1400，'easeInOutQuint'，函数（）{
});
});
body{溢出：隐藏；最大宽度：100vw；}
标题{位置：绝对；左侧：0；顶部：0；宽度：200px；高度：100vh；颜色：#ffffff；字体大小：2em；}
.列{位置：绝对；左侧：100px；顶部：0；高度：100vh；背景：绿色；宽度：100%；}
.列{高度：100vh；浮动：左；颜色：#ffffff；字体大小：2em；文本对齐：居中；显示：块；不透明度：0.75；-webkit触摸标注：无；-webkit用户选择：无；-khtml用户选择：无；-moz用户选择：无；-ms用户选择：无；用户选择：无；}
.显示{背景：rgba（0,0,0,0.5）；高度：100vh；-webkit转换：全部2秒；
-moz转换：所有2s；
-o-过渡：所有2s；
过渡：所有2s线性；左：200px；颜色：#ffffff；}

双击
按钮
任何
的
这些柱子
透露
这
在Firefox中也不起作用，看起来像是有一些链接腐烂了well@apaul34208谢谢，现在应该修好了<代码>：）

，祝你过得愉快！