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はdisplay：noneのcssを持ちます。

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 に答える