1

質問リンクのある FAQ のチャートがある Web サイトの変更に取り組んでいます。
質問のリンクをクリックすると、ドロップダウンに回答が表示されます。

私の目標は、ドロップダウン表示アクションのリンクされたテキストの横にあるプラス アイコン イメージをマイナス アイコンに置き換えることです。

FAQ では、Spry 折りたたみパネル (sprycollapsiblepanel.js) を使用して、リンクの表示/非表示を管理します。JavaScript ソース コードのコードを変更する前に、dreamweaver を使用してこれを行う簡単な方法があるかどうか疑問に思っていました。

前もって感謝します。

更新: show/reveal アクションを呼び出す html は次のとおりです。

                        <div class="CollapsiblePanel">
                          <div id="CollapsiblePanel1" class="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
                            <div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
                          </div>
                        </div>

ドロップダウンのアクションを構築するには、Spry はページの下部で次のことを要求します。

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>
4

5 に答える 5

1

SpryCollapsiblePanel.css で、次のスタイル ルールを修正します。

.CollapsiblePanelTab {
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    border-bottom: solid 1px #CCC;
    margin: 0px;
    padding: 2px 2px 2px 25px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
}

これにより、左側のパディングが増加し、画像用のスペースが確保されます。

次に、画像を次のルールに追加します。

.CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #EEE;
    background-image: url(images/plus.gif);
    background-position:left top;
    background-repeat: no-repeat;
}

.CollapsiblePanelClosed .CollapsiblePanelTab {
    background-image: url(images/minus.jpg);
    background-position:left top;
    background-repeat: no-repeat;
    /* background-color: #EFEFEF */
}
于 2011-01-10T14:43:04.423 に答える
0

簡単な JavaScript で簡単に修正できます。

次のスクリプトを追加します。

<script type="text/javascript">
<!--
   function name ()
{
    var img = document.getElementById("imgid");

    if (img.src == "plus.png") {
        img.src = "minus.png";
    }
    else {
        img.src = "plus.png";
    }
}
//-->
</script>

それが完了したら、折りたたみ可能なパネルを定義する div を見てください。次のようになります。

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>

これが機能するために必要なのは、onclick="name();" を追加することだけです。構文に：

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>
于 2011-02-07T19:55:18.883 に答える
0

プラグインは、 が開かれたときと閉じられたときに、それぞれのパネル タイトルにクラスを追加します。これらは、それに応じて " CollapsiblePanelOpen" と " CollapsiblePanelClosed" です。これで、CSS を使用して +- 効果と背景画像を追加できます。

于 2011-01-10T06:34:49.163 に答える
0

onclick 画像を切り替えてから、何か他のものを onclick して + 記号に戻します

于 2011-01-10T06:36:51.093 に答える
0

それが画像で、ソース コードを変更したくないが JavaScript を使用したい場合srcは、画像のプロパティを変更する必要があります。

// Grab the img object from the DOM
var img = document.getElementById("theImageId");

// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
  img.src = "minus.png";
}
else {
  img.src = "plus.png";
}

このコードは、必要な場所 (onclickまたは関数など) に配置できます。また、画像の URL も明らかに更新する必要があります。

于 2011-01-10T06:37:48.433 に答える