Question

这是我的手风琴，我如何将一些样式表应用于此，所以看起来像一棵树。

手风琴标签关闭时

例如：+，手风琴开启时-

<div class="Accordion" id="systemAccordion" tabindex="1">
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showSystemSpan();">System</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showPatchesSpan();">Patches</a><br/>
                        <a onClick="showNetworkSpan();">Network</a><br/>
                    </div>
                </div>
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab" >&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showNone();">User Environment</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showEnvironmentVariableSpan();">Environment Variables</a><br/>
                    </div>
                </div>
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showSystemSpan();">{mainData::@product}</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showOdbcSpan();">ODBC</a><br/>
                        <a onClick="showBitmodeSpan();">Bitmode</a><br/>
                    </div>
                </div>
                <script type="text/javascript">
                    var sysAcc = new Spry.Widget.Accordion("systemAccordion",  {defaultPanel: -1, useFixedPanelHeights: false });
                </script>
            </div>

Answer 1

如果你查看SpryAccordion.css样式表，你会发现

.AccordionPanelTab {}

.AccordionPanelOpen .AccordionPanelTab {}

你可以设置你喜欢的那两个背景图像，以获得你想要的效果.AccordionPanelTab会影响正常状态和.AccordionPanelOpen .AccordionPanelTab会影响打开状态。样式表中还有注释，告诉您不同类的功能。

Answer 2

使用css背景图像属性，并在打开和关闭时将其应用于正确的css类。

如何使spry手风琴看起来像一棵树

2 个答案: