下拉菜单-要显示的类的Javascript:如果选项卡类打开或关闭，则为none(可折叠面板）

drop down menu - Javascript for a class to display: none, if a tab class is open or close (Collapsible Panel)

本文关键字：则为 none 可折叠 Javascript 显示 如果 下拉菜单 选项      更新时间：2023-09-26

我正在处理一个可折叠的面板菜单。除了可折叠面板选项卡中的标题外，一切看起来都很好。因此，以下是我要做的，如果可折叠面板内容打开，我希望可折叠面板标签显示特定的span类。例如，如果它是打开的，它将显示一个减号或（-）号。如果接近，它将显示加号或（+）号。

这是代码：

<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将具有display:none的css。

在css中，这个想法就像：

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

当然，这是行不通的。因此，我认为需要一个javascript。

我需要一个非常简单的答案，如果有人可以的话。非常感谢。我希望这个问题是清楚易懂的

我不熟悉你可以在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>

这一切都假设您从在css中为closeButton指定display:none;开始。

EDIT：我更改了代码，使其更加具体，并注意到css 中对display:none;的要求

相关文章：