定制jquery UI手风琴

当我使用手风琴时，显示屏会进入整个页面。我想调整显示器的宽度和高度。定制jquery UI手风琴

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

在上面的链接的例子是在JQuery中做....我不想使用它......我想自定义什么是可用jquery UI

2011-07-09 Suresh Ganapathy

您的'显示是否进入整个页面'？你有没有尝试给你的div宽度和高度？否则你应该发布你的代码，因为你的问题是模糊的。

2011-07-09 11:31:39 Kokos

很抱歉的不确定性...我是很新的前端Web开发。可能是我的问题的答案是微不足道的。我已经简单地从以下网站下载了源代码：http：//jqueryui.com/demos/accordion/ 手风琴显示器的宽度与我的网页宽度相同。我怎样才能减少它，使紧凑，使手风琴将只出现在我的网页的左角。我希望现在很清楚要问这个问题不同，我怎样才能使用从http：//下载的源代码jqueryui.com/demos/accordion/但有显示像http://www.i-marco.nl/weblog/jquery-accordion-3 –

请忽略这种怀疑...这是非常平凡的....我发现回答。以下更改就足够了... .ui-accordion {width：40％; float：right} –

可以创建自定义手风琴：

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

.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> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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>

来源

2015-10-02 05:10:37

定制jquery UI手风琴

回答

相关问题