Javascript 水平手风琴“slidemenu" [英] Javascript horizontal accordion "slidemenu"
本文介绍了Javascript 水平手风琴“slidemenu"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在开发一个需要使用以下水平手风琴 javascript 的网站:
http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/
问题在于编写脚本是为了将面板展开为pt"值.我希望能够将其扩展为%"值，以避免用户使用不同屏幕尺寸(即使用移动设备)的问题.
我一直在努力解决这个问题 - 尝试编辑 javascript，改用 css，等等……但似乎无法解决.有什么想法吗?
解决方案
;(function ($ , window, document, undefined ) {var space = ($(window).width() - $('header').width());$('.bar').width(space/4);var previousTarget = null;$(".bar").bind('click',function(e){e.preventDefault();if(this===previousTarget) {无功时间 = 100;$(this).nextAll().each(function(i,o) {设置超时(函数(){$(o).css({'z-index':a});$(o).dequeue().stop().animate({ 'left' : '0' }, 1500, 'easeInOutQuad',function() {$(o).css({'left':'initial'});});一个++;}， 时间);时间 += 50;});$(this).prevAll().each(function(i,o) {设置超时(函数(){var that = $(this);$(o).css({'z-index':a});$(o).dequeue().stop().animate({ 'left' : '0' }, 2000, 'easeInOutQuad',function() {$(o).css({'left':'initial'});});一个++;}， 时间);时间 += 50;});var left = $(this).prevAll().length;$(this).dequeue().stop().animate({'right':0 * left + 'vw','left':'initial'});以前的目标=空；返回真；} 别的 {$(this).css({'z-index':20});变量 a = 4;var t = $(this);如果(！t.hasClass('动画')){无功时间 = 100;$(this).nextAll().each(function(i,o) {设置超时(函数(){$(o).css({'z-index':a});$(o).dequeue().stop().animate({ 'left' : '100vw' }, 2000, 'easeInOutQuad');一个++;}， 时间);时间 += 50;});$(this).prevAll().each(function(i,o) {设置超时(函数(){var that = $(this);$(o).css({'z-index':a});$(o).dequeue().stop().animate({ 'left' : '-100vw' }, 1500, 'easeInOutQuad');一个++;}， 时间);时间 += 50;});var left = $(this).prevAll().length;$(this).dequeue().stop().animate({'right':20 * left + 'vw','left':'initial'});}t.addClass('动画');无功时间 = 100;t.nextAll().each(function(i,o) {设置超时(函数(){$(o).css({'z-index':a});$(o).dequeue().stop().animate({ 'left' : '100vw' }, 2000, 'easeInOutQuad');一个++;}， 时间);时间 += 50;});t.prevAll().each(function(i,o) {设置超时(函数(){var that = $(this);$(o).css({'z-index':a});$(o).dequeue().stop().animate({ 'left' : '-100vw' }, 1500, 'easeInOutQuad');一个++;}， 时间);时间 += 50;});var left = $(this).prevAll().length;$(this).dequeue().stop().animate({'right':20 * left + 'vw','left':'initial'});以前的目标=这个；返回假；}});})( jQuery，窗口，文档);/* -- 全局 -- */@import url('fonts.css');*, *:before, *:after{ -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif;color:#222;}body{font-size:1em;line-height:1.4;overflow-x:hidden;overflow-y:scroll;min-width:980px;}html,body{height:100%;margin:0;padding:0;width:100%;background-color:#333366;}::-moz-selection{背景:#b3d4fc；文本阴影:无；}::选择{背景:#b3d4fc；文本阴影:无；}/* -- 排版 -- */h1,h2,h3,h4 { display:block;text-transform:uppercase;letter-spacing:-0.03em;}h2{font:normal normal 400 30pt/normal 'Gobold','Lucida Grande','Lucida Sans Unicode','Lucida Sans','DejaVu Sans','Bitstream Vera Sans','Liberation Sans',Verdana,'VerdanaRef',sans-serif;text-align:center;margin:0;padding:0 0 0 15px;}/* - 结构体 - */#main { position:absolute;float:right;width:100%;height:100%;}.pages-detail{position:absolute;z-index:3;top:0;left:40vw;min-height:100vh;max-width:60vw;min-width:60vw;text-align:center;background:#fff;-webkit-transition:all 2s linear;-moz-transition:all 2s linear;transition:all 2s linear;}.pages-detail.closed { opacity:0;width:0;min-height:0;}#page{position:absolute;z-index:1;display:none;padding:10px 0 0 0;top:0;left:40vw;min-height:200px;text-align:center;}/* -- 标题 -- */标题{位置:固定；顶部:0；左:0；高度:100%；宽度:20vw；背景颜色:#000000；文本对齐:中心；z-index:4；填充顶部:5vh；背景-颜色:#333366；背景尺寸:封面；背景位置:居中；}标题#social{position:absolute;z-index:5;width:100%;top:65vh;}header #social a{display:block;width:35px;height:28px;margin:0 auto;font-size:1.85em;padding:24px 0;text-decoration:none;}header #social a span{display:block;position:absolute;top:0;left:0;width:0;height:28px;}标题 h1{margin:0 auto 0 auto;padding:0;background-image:url(../img/logo.gif);width:142px;height:114px;}标题 h1 a{display:block;width:142px;height:114px;outline:none;}/* - 列 - */#carousel{position:fixed;top:0;left:20vw;z-index:2;width:81vw!important;min-width:700px;height:100vh;overflow:hidden;}#carousel #carousel-inner{position:absolute;z-index:1;height:100%;}#carousel.transform .bar{-webkit-transform:translate3d(0,0,0);}#carousel .bar{display:block;border:1px solid #000;position:relative;cursor:pointer;overflow:hidden;width:20vw;height:100%;float:left;color:#1f1f1f;text-decoration:无；文本对齐:居中；背景大小:封面；背景位置:居中；}#carousel .bar:hover,#carousel .bar:active,#carousel .bar:focus,#carousel .bar:visited{color:#1f1f1f;text-decoration:none;}.active { position:absolute!important;left:0!important;-webkit-transition:all 2s linear;-moz-transition:all 2s linear;-o-transition:all 2s linear;transition:all 2s linear;}#carousel .bar:after { content:'A';position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0,0,51);opacity:0;-webkit-transition:所有 0.5s 线性；-moz-transition:所有 0.5s 线性；-o-transition:所有 0.5s 线性；transition:所有 0.5s 线性；}#carousel .bar:hover:after { opacity:0.5;}#carousel .bar img { position:absolute;z-index:1;top:0;left:0;width:100%;}#carousel .bar .title { position:absolute;z-index:6;width:100%;margin-top:38.5vh;background:rgba(0,0,51,0.5);}#carousel .bar .title h2 { text-transform:uppercase;padding:35px 0 35px;color:#ffffff;letter-spacing:-0.02em;}.stripes { width:100%;height:100%;position:absolute;z-index:5;background-size:4px 4px;}@supports (-webkit-appearance:none) { .stripes { background-image:linear-gradient(-45deg,rgba(54,54,116,0.65) 25%,transparent 25%,transparent 50%,rgba(54,54,116,0.65) 50%,rgba(54,54,116,0.65) 75%,透明 75%,透明);背景尺寸:4px 4px;} }@-moz-document url-prefix() { .stripes { background:repeating-linear-gradient(-45deg, rgba(54, 54, 116, 0.2) 5px, rgba(54, 54, 116, 0.2) 6px,透明10px) 重复滚动 0% 0% 透明；} }<h1><a href="/"></a></h1></标题><div id="main" role="main"><div id="轮播"><div class="bar" data-position="1" title="Foundation" style="background-image:url('/img/page1.jpg');"><div class="stripes"></div><div class="title"><h2>第1页</h2> <div class="bar" data-position="2" title="新闻" style="background-image:url('/img/page2.jpg');"><div class="stripes"></div><div class="title"><h2>PAGE 2</h2>
<div class="bar" data-position="3" title="Social" style="background-image:url('/img/page3.jpg');"><div class="stripes"></div><div class="title"><h2>第3页</h2>
