自定义 Jquery UI 手风琴答案

【问题标题】：Customizing Jquery UI Accordion自定义 Jquery UI 手风琴
【发布时间】：2018-12-28 11:24:00
【问题描述】：

当我使用 Accordion 时，整个页面都会显示。我想调整显示的宽度和高度。

我希望我的手风琴具有http://www.i-marco.nl/weblog/jquery-accordion-3/ 中所示的宽度

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

您的“显示正在整个页面中”？你试过给你的 div 一个 CSS 宽度和高度吗？否则你应该发布你的代码，因为你的问题很模糊。

【讨论】：

抱歉含糊不清...我对前端 Web 开发非常陌生。可能是我的问题的答案是微不足道的。我只是从以下站点下载了源代码：jqueryui.com/demos/accordion 手风琴显示的宽度与我的网页宽度相同。我怎样才能减少它并使其紧凑，以便手风琴只会出现在我网页的左角。我希望现在很清楚要问这个问题不同，我如何使用从jqueryui.com/demos/accordion下载的源代码但是有显示为i-marco.nl/weblog/jquery-accordion-3
请忽略这个疑问......这很琐碎......我找到了答案。以下更改就足够了... .ui-accordion { width: 40%;浮动：对}

【解决方案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>

【讨论】：