-1

http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

http://jquery.bassistance.de/accordion/demo/

3番目の例のようなものですが、「アイコン」は画像ではなくテキスト文字である必要があります。このオプションを選択すると、「+ギター」が「-ギター」に変わります。私のhtmlは次のようになります：

<a><span>+<span> guitar</a>

に

<a><span>-<span> guitar</a>

それを行う方法について何かアイデアはありますか？

4

2 に答える 2

0

免責事項：リンクされた例をざっと見たところ、リンクされたjavascriptライブラリに基づくコンポーネントであるjqueryアコーディオンには次のことが当てはまらない可能性があります。

表示されている画像はCSSを介して設定されており、実際にはこの要素の背景画像です。

 #navigation a.head (all closed "tabs")

と

 #navigation a.selected (the one currently expanded).

したがって、基本的に2つのオプションがあります。

  • 「-」や「+」に似た画像を作成します。おそらく最も簡単なハックです。
  • それらのセレクターに対してjQueryの.htmlを操作し、それによって、プリプリメントされた文字列'-'を'+'に、またはその逆に変更します。
于 2012-09-14T20:52:51.093 に答える
0

cssから画像を削除し、content要素で：beforeセレクターを使用する必要があります。

変化する

#navigation a.head {
    cursor:pointer;
    border:1px solid #CCCCCC;
    background:#5263AB url(collapsed.gif) no-repeat scroll 3px 4px;
    color:#FFFFFF;
    display:block;
    font-weight:bold;
    margin:0px;
    padding:0px;
    text-indent:14px;
    text-decoration: none;
}

#navigation a.selected {
    background-image: url(expanded.gif);
}

に

#navigation a.head {
    cursor:pointer;
    border:1px solid #CCCCCC;
    background:#5263AB;
    color:#FFFFFF;
    display:block;
    font-weight:bold;
    margin:0px;
    padding:0px;
    text-indent:14px;
    text-decoration: none;
}

#navigation a.head:before {
    content: '+';
}

#navigation a.selected:before {
    content: '-';
}
于 2012-09-14T21:16:14.843 に答える