使jQuery UI手风琴水平展开

Question

我正在使用jquery ui手风琴来向用户展示不同的数据，它完美地按照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>";

- Samer El Gendy

Answer 1

你好，这里有2个工作演示，任选其一以达到目的：http://jsfiddle.net/g4NLf/

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

一个使用简单手风琴效果，另一个使用小型库。

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

- Tats_innit

---

在Firefox中也无法工作，看起来还存在一些链接失效的问题。 - apaul

@apaul34208 感谢您，现在应该已经修复了！:) http://jsfiddle.net/g4NLf/ ，祝您愉快！ - Tats_innit

Answer 2

在 Codepen 上查看完整页面演示。

var space = ($(window).width() - 100);
$('.column').width(space/4);

$(".column").click(function(){
 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', function () {
      
   });
    $(this).dequeue().stop().animate({
        width:(space/4)
    },1400,'easeInOutQuint',function(){
      $(this).html('AGAIN');
    });
  $('.reveal').dequeue().stop().animate({
        width:'75vw'
    },1400,'easeInOutQuint',function(){
    });
});

body { overflow:hidden;max-width:100vw; }
header { position:absolute;left:0;top:0;width:200px;height:100vh;color:#ffffff;font-size:2em;}
.columns { position:absolute;left:100px;top:0;height:100vh;background:green;width:100%;}
.column { height:100vh;float:left;color:#ffffff;font-size:2em;text-align:center;display:block;opacity:0.75;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.reveal { background:rgba(0,0,0,0.5);height:100vh;-webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s linear;left:200px;color:#ffffff; }

<div class="container">
  
  <header style="background:#333333;">
    
  </header>
  
  <div class="columns" style="background-image:url('http://placekitten.com/800/300');background-size:cover;background-repeat:no-repeat;background-position:center top;">
    
    <div class="column" style="background:blue;">DOUBLE<br>CLICK</div>
    <div class="column" style="background:green;">ANY<br>OF</div>
    <div class="column" style="background:orange;">THESE COLUMNS</div>
    <div class="column" style="background:pink;">TO REVEAL</div>
    <div class="column reveal">THIS</div>
  </div>
</div>

- davidcondrey