Question

当我使用Accordion时，显示器将进入整个页面。我想调整显示器的宽度和高度。

我希望手风琴的宽度如http://www.i-marco.nl/weblog/jquery-accordion-3/

所示

上面链接中的示例是在JQuery中完成的....我不想使用它...我想自定义Jquery UI中可用的内容

Answer 1

你的'显示器是整页还是'？你试过给你的div宽度和高度吗？否则你应该发布你的代码，因为你的问题很模糊。

Answer 2

您可以创建自定义手风琴：

	$('.accordionOm').next().hide();
	$(".opened").next().show();
	$('.accordionOm').click(function()
	{
		if($(this).hasClass("opened") == true)
		{
			$(this).next().slideUp("slow");
			$(this).removeClass('opened');
		}
		else
		{
			$(".opened").next().slideUp("slow");
			$(".opened").removeClass("opened");
			$(this).addClass('opened');
			$(this).next().slideDown("slow");
		}
	});

.accordionOm { position:relative; padding:10px 0 10px 30px; margin:0; font:300 18px 'Oswald', Arial, Helvetica, sans-serif; cursor:pointer;}
.accordionOm:hover { color:#000;}
.accordionOm:before,.accordionOm:after { content:""; position:absolute; background:#333; display:inline-block;}
.accordionOm:before { width:20px; height:2px; left:0; top:22px;}
.accordionOm:after { width:2px; height:20px; left:9px; top:13px; transition:transform .5s; transform:rotate(0);}
.accordionOm.opened:after { transform:rotate(90deg);}
.accordionOm + div { border-left:4px solid #999; padding:0 15px; margin-left:8px; font:13px 'Open Sans', Arial, Helvetica, sans-serif; color:#666;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

<h4 class="accordionOm">Accordian heading</h4>
<div>
	<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>

自定义Jquery UI手风琴

2 个答案: