定製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手風琴

回答

相關問題