gpt4 book ai didi

javascript - 如何将垂直菜单转换为 Accordion 菜单

转载 作者:太空宇宙 更新时间:2023-11-04 13:11:42 27 4
gpt4 key购买 nike

我正在尝试构建一个响应式选项卡菜单,但是当菜单进入垂直 View 时,我正在尝试像 Accordion 一样的菜单(例如选项卡之间的内容),但我不知道如何去关于它而不会失去响应能力。

HTML

<h1>Responsive Tabs</h1>

<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Test1</a></li>
<li><a href="#tab2">Test2</a></li>
<li><a href="#tab3">Test3</a></li>
</ul>

<div class="tabContainer">
<div id="tab1" class="tabContent">
Test1
</div>

<div id="tab2" class="tabContent">
Test2
</div>

<div id="tab3" class="tabContent">
Test3
</div>

CSS

    body {
font-family: Arial, sans-serif;
}



div.tabBox {
width:99.9%;
float:left;
overflow: visible;

 div.tabBox h3 {
padding:20px 0px;
}


ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
width:99.9%;
}

ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 32px;
line-height: 32px;
margin-bottom: -1px;
overflow: hidden;
position: relative;
}

ul.tabs li a {
display: block;
padding: 0 5px;
outline: none;
background:none;
}


.tabContainer {
border-top: none;
overflow: hidden;
clear: both;
float: left;
width:99.9%;
min-height:300px;
margin-bottom:10px;
}

.tabContent {
padding: 20px;
}

.tabContent h3 {
padding:0px;
}

/**** TABS STYLES ****/

div.tabBox h3 {
}


ul.tabs {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
}

ul.tabs li {

}

ul.tabs li a {
background:#eee;
text-decoration: none;
font-size: 11px;
color: #000;
outline: none;
border: 1px solid #ccc;
border-left: none;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
}

ul.tabs li a:hover {
background: #eee;
}

ul.tabs li.active {
border-bottom:1px solid #fff;
}

ul.tabs li.active a, ul.tabs li.active a:hover {
background: #fff;
}

div.tabContainer {
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background:#fff;
}

@media only screen and (max-width: 767px) {

div.tabBox {
border: 1px solid #ccc;
}

ul.tabs {
height: auto;
display: block;
width:100%;
border-left:0px;
}

ul.tabs li {
width:100%;
}

ul.tabs li a {
border-top-left-radius:0px;
-moz-border-top-left-radius:0px;
-webkit-border-top-left-radius:0px;
border-top-right-radius:0px;
-moz-border-top-right-radius:0px;
-webkit-border-top-right-radius:0px;
border:0px;
}

div.tabContainer {
border: 0px;
}

}

这是 fiddle http://jsfiddle.net/Jnewguy/5B5KJ/

有什么建议或想法吗?

最佳答案

有许多不同的选择……这取决于您喜欢如何解决这个问题。

1) 为响应式版本添加更多 html。

<a href="#tab1">Test1</a>   
<div id="tab1" class="tabContent">
Test1
</div>
<a href="#tab2">Test2</a>
<div id="tab2" class="tabContent">
Test2
</div>
<a href="#tab3">Test3</a>
<div id="tab3" class="tabContent">
Test3
</div>

在每个选项卡前添加选项卡链接,并仅在移动设备上显示它们。您隐藏默认的并使用适当的 js 设置新的样式。

2) 您可以应用相同的做法,但使用 JS 克隆选项卡链接并在选项卡之前添加每个链接。

$('.tabs li a').each(function(){
var $self = $(this);
var href = $self.attr('href');
var clone = $self.clone();
$(clone).insertBefore($(href));
})

3)可以在ul>li结构中追加内容,但每次退出/进入断点时都必须移动它

$('.tabContent').each(function(e){
var $self = $(this);
$('.tabs li').eq(e).append($self);
})

还有一些我暂时想不到的其他选择......

我不知道你为什么给他指一个 accrodion 菜单问题,因为他的问题是他必须只在响应版本中将他当前的垂直转换为 accrodion...

关于javascript - 如何将垂直菜单转换为 Accordion 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24640869/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com