javascript - 如何使活泼的 Accordion 看起来像一棵树

Question

这是我的 Accordion ，我怎样才能将一些样式表应用到它上面，让它看起来像一棵树。

例如:+ 当 Accordion 选项卡关闭时 - 当 Accordion 打开时

<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 将影响打开状态。样式表中还有注释告诉您不同类的作用。