Question

我有一个jQuery手风琴，默认情况下是折叠的（collapsible: true, active: false）而且效果很好，但它太大了。我设法改变了开放式手风琴内部元素的大小，但我还没能使折叠的手风琴变小（h3标签）。

我尝试为h3标记提供一个类名称，并使用较小的字体大小设置该类，但没有任何效果，并尝试将h3标记更改为h5影响。我还尝试添加选项＆＃39;标题：＆＃34; h5＆＃34;＆＃39;对于jQuery手风琴调用，同时使用h5标记作为标题而没有效果。

任何帮助都将不胜感激。

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

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

Answer 1

如果您正在尝试更改手风琴标题的字体大小请尝试将此css添加到您的手风琴中：这会使标题文字变小，但您可以通过更改字体大小来设置所需的字体。

#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手风琴标题框更小？

2 个答案: