我该如何解决它,下面的div打开,3个标签总是保持在同一位置? div不应该在选项卡之间打开,但在下面。三个标签应该始终并排。这有可能吗?任何帮助将不胜感激。谢谢。浮动水平手风琴
var acc = document.getElementsByClassName("menu-tabs");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
button.menu-tabs {
background-color: #fff;
border-color: #EB282C;
border-bottom: 1px solid #ddd;
margin-left: 0;
list-style: none;
float: left;
margin-bottom: -1px;
position: relative;
display: block;
}
button.menu-tabs.active, button.menu-tabs:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
float: none;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="menu-tabs">tab 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="menu-tabs">tab 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="menu-tabs">tab 3</button>
<div id="foo" class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
你有没有尝试。 menu-tabs {float:left;}? –
已经在我的例子中;) – azrm