如何使jQuery UI手風琴的頭部框變小？

我有一個默認摺疊的jQuery Accordion（collapsible: true, active: false），它效果很好，但它太大了。我設法改變了敞開式手風琴內部元件的尺寸，但我還沒有能夠縮小摺疊式手風琴（h3標籤）。如何使jQuery UI手風琴的頭部框變小？

我試圖給h3標籤的類名和樣式用較小的字體大小，沒有效果類，並試圖改變h3標籤的h5有沒有效果。我還嘗試在頭部添加「header：」h5「'到jQuery手風琴電話，同時將h5標記作爲標題，但沒有任何效果。

任何幫助，將不勝感激。

$(function() { 
    $("#accordion").accordion({ 
     collapsible: true, 
     active: false 
    }); 
}); 

<div id="accordion"> 
    <h3>@Resources.AccordionTitle</h3> 
    <div> 
     <form></form> 
    </div> 
</div>

來源

2015-02-23 Elound

請在您的問題重現該問題足夠的代碼。 – TylerH 2015-02-23 16:46:54

檢查瀏覽器開發工具（F12）中的css並進行相應的調整 – charlietfl 2015-02-23 17:36:24

從素集的答案，並與CSS打了一下後，這是做了什麼，我一直在尋找：

HTML：

<div id="MyAccordion"> 
    <h3>AccordionHeader</h3> 
    <div> 
     /*Accordion Content*/ 
    </div> 
</div>

CSS：

#MyAccordion .ui-accordion-header { 
line-height: 15px; /*Header Box height*/ 
font-size: 13px;  /*Header Text size*/ 
text-indent: 10px;} /*Not quite sure about this one*/

腳本：

$(function() { 
    $("#MyAccordion").accordion({ 
     collapsible: true, 
     active: false 
    }); 
});

來源

2015-02-23 18:39:25 Elound

如果你試圖改變手風琴頭嘗試加入這個CSS的手風琴的字體大小：這將使頭文字較小，但您可以通過更改字體大小設置你的慾望的字體。

#accordion .ui-accordion-header { 
    line-height: 20px; //reduces height of the header box 
    font-size: 10pt; 
    width: 100%; 
    text-indent: 10px; 
}

觀看演示：

$(function() { \t 
 
$("#accordion").accordion(); 
 
\t $("#accordion .ui-accordion-content").css({ width:"260px" });// width of the box content area 
 
});

#accordion .ui-accordion-header { 
 
    line-height: 20px; 
 
    font-size: 10pt; 
 
    width: 100%; 
 
    text-indent: 10px; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>jQuery UI Accordion - Default functionality</title> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script> 
 
</script> 
 

 
<style> 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<div id="accordion" style="width:300px;"> 
 
<h3>Section 1</h3> 
 
<div> 
 
<p> 
 
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
 
ut neque. 
 
</p> 
 
</div> 
 
<h3>Section 2</h3> 
 
<div> 
 
<p> 
 
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
 
purus. 
 
</p> 
 
</div> 
 
<h3>Section 3</h3> 
 
<div> 
 
<p> 
 
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
 
Phasellus pellentesque purus in massa. 
 
</p> 
 
<ul> 
 
<li>List item one</li> 
 
<li>List item two</li> 
 
<li>List item three</li> 
 
</ul> 
 
</div> 
 
<h3>Section 4</h3> 
 
<div> 
 
<p> 
 
Cras dictum. 
 
</p> 
 
<p> 
 
Suspendisse eu nisl. 
 
</p> 
 
</div> 
 
</div> 
 

 

 
</body> 
 
</html>

來源

2015-02-23 17:06:07

這確實使標題文本更小（對於此部分，Thx接近我的目標一步），但標題框保持不變（我稱之爲標題框爲手風琴摺疊了），並且在此之後，內容框與標題框不正確對齊，是否意圖？ – Elound 2015-02-23 17:22:01

@Elound你想要寬度減小或高度。 – 2015-02-23 17:32:04

我剛發現你需要避免設置內容的寬度和標題框的寬度完全相同。即使在css設置爲寬度的情況下，我也會發布我的代碼作爲答案：100％頭部始終大於內容，所有手風琴的寬度都沒有設置正確。 – Elound 2015-02-23 18:29:35

如何使jQuery UI手風琴的頭部框變小？

回答

相關問題