如何使 jQuery UI 手风琴 header 盒子变小？

Question

我有一个默认折叠的 jQuery 手风琴 (collapsible: true, active: false)，它工作得很好，但它太大了。我设法改变了打开的手风琴内元素的大小，但我无法使折叠的手风琴变小（h3 标签）。

我尝试给 h3 标签一个 class 的名称和样式，class 带有较小的 font-size 但没有效果，并尝试更改 h3 标记到 h5 没有效果。我还尝试将选项 'header: "h5"' 添加到 jQuery 手风琴调用，同时将 h5 标记作为 header 无效。

如有任何帮助，我们将不胜感激。

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

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

Answer 1

如果您尝试更改手风琴的字体大小 header 尝试将此 css 添加到您的手风琴中：这将使 header 文本变小但您可以通过更改 font-size.

来设置您想要的字体

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

查看演示：

$(function() { 
$( "#accordion" ).accordion();
 $("#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>

Answer 2

根据 Suchit 的回答，在使用了 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
    });
});

如何使 jQuery UI 手风琴 header 盒子变小？

How do I make a jQuery UI accordion header box smaller?

html

css

jquery

jquery-ui

jquery-ui-accordion