0

我正在开发一个可折叠的面板菜单。除了可折叠面板选项卡中的标题外，一切看起来都很棒。所以，这就是我想要做的，如果可折叠面板内容打开，我希望可折叠面板选项卡显示特定的跨度类。例如，如果它打开，它将显示减号或 (-) 符号。如果接近，它将显示一个加号或 (+) 号。

这是代码：

<div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">
       <span class="closedmenu">+</span>
       <span class="openmenu">-</span>
    </div>
    <div class="CollapsiblePanelContent"> 
       <ul>
          <li><a href="LINK1urlHERE">LINK1titleHERE</a></li>
          <li><a href="LINK2urlHERE">LINK2titleHERE</a></li>
       </ul>
    </div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
</script>

或者，如果可折叠面板内容是打开的，我希望 .closedmenu 类具有 display:none 的 css。并且如果可折叠面板内容关闭，则 .openmenu 类的 css 为 display:none。

在 css 中，这个想法是这样的：

.CollapsiblePanelOpen .CollapsiblePanelTab {
   .closedmenu {display:none;} }
.CollapsiblePanelClosed .CollapsiblePanelTab {
   .openmenu {display:none;} }

但是，当然，这是行不通的。所以，我认为需要一个javascript。

我需要一个非常简单的答案，如果有人可以，请。谢谢！我希望这个问题是清晰易懂的。:)

4

1 回答 1

0

我不熟悉你可以在 Spry 中使用的钩子，但你可以像这样运行：

function clickPlus() {
    document.getElementById("openButton").style.display = "none";
    document.getElementById("closeButton").style.display="inline";
}

function clickMinus() {
    document.getElementById("openButton").style.display = "inline";
    document.getElementById("closeButton").style.display="none";
}

在你的跨度上做这样的事情：

<span id="openButton" onclick="clickPlus();">+</span>
<span id="closeButton" onclick="clickMinus();">-</span>

这一切都假设您从display:none;在 css 中指定closeButton.

编辑：我将代码更改为更具体一点，并注意到display:none;css 中的要求

于 2013-02-11T03:09:25.227 回答