我已经在互联网上搜寻解决方案,但是我完全陷入了困境。基本上,我想要三个大小和水平相等的按钮,以显示和隐藏三个不同的内容部分。
通过使用span + h3
CSS样式,我使用内联块将按钮显示在水平行中。但是,当我添加了手风琴功能时,CSS破裂了,而且手风琴还是使它成为垂直堆栈。
1)我认为应该是盲目的效果而不是手风琴,对吗?谁能告诉我如何让它按我的意愿工作?
2)为什么收回手风琴后CSS还是坏了?我假设我在尝试将其切出或添加一些东西时试图将其正确放置,而这导致它停止了?
3)我还具有手风琴功能,因此在下次单击时它会自动关闭所有打开的内容。我以为我在弄乱的同时也打破了这一点-但我再也看不到我在做什么错。
的HTML
<section>
<p>one</p>
</section>
<h5>Or</h5>
<span class="button"><h3>title 2</h3></span>
<section>
<p>two</p>
</section>
<h5>Or</h5>
<span class="button"><h3>title 3</h3></span>
<section>
<p>three</p>
</section>
</div>
的CSS
div#container span.block {
display: inline-block;
width:29%;
background-color:red;
}
div#container span.block h3 {
text-align: center;
}
div#container section {
width: 100%;
}
JS
(function ($) {
/* Initially hide all 'section' content */
var allPanels = $('#container > section').hide();
/* on block-btn/ h3 click - use slide toggle effect to hide/ show content */
$('#container > span.button > h3').click(function () {
$(this).parent().next().slideToggle()
.siblings('.hide').slideUp();
return false;
});
$('.close').click(function () {
$('#container .hide').slideUp();
});
})(jQuery);
您可以根据您的自身手风琴此试图东西的这个调:
(function ($) {
/* Initially hide all 'section' content */
/*var allPanels = $('#container > section').hide();
on block-btn/ h3 click - use slide toggle effect to hide/ show content */
/*$('#container > span.button > h3').click(function () {
$(this).parent().next().slideToggle()
.siblings('.hide').slideUp();
return false;
});
$('.close').click(function () {
$('#container .hide').slideUp();
});*/
$(".button").click(function(){
$('.subDiv').slideUp("slow");
$(this).next('.subDiv').slideDown("slow");
});
})(jQuery);
在这里,您可以仅利用JQuery的slideUp和slideDown函数以及嵌套<ul>
和<li>
或<div>
标记以及JQuery UI库。
HTML:
<div id="container"> <span class="button"><h3>title 1</h3></span>
<div class="subDiv">
<section>
<p>one</p>
</section>
</div>
<h5>Or</h5>
<div class="button"><h3>title 2</h3></div>
<div class="subDiv">
<section>
<p>two</p>
</section>
</div>
<h5>Or</h5>
<div class="button"><h3>title 3</h3></div>
<div class="subDiv">
<section>
<p>three</p>
</section>
</div>
</div>
在您的Fiddle实现中尝试一下。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句