2

div を非表示または表示するアンカー タグがありますが、そのテキストとアイコンを変更できませんでした。

現在、アイコンタグを通常のテキストとして解析しているため、テキストとアイコンタグを変更するにはどうすればよいですか。

アンカータグ:

<a class="collapse-info btn"><i class="icon-arrow-up icon-white"></i> Hide Info</a>

クラスが「icon-arrow-up icon-white」から「icon-arrow-down icon-white」に移動し、トグル中に戻る必要があります。

Javascript (jquery)

$('.collapse-info').toggle(function() {
$('.server-info').slideUp();
$(this).text('Show Info');
}, function () {
$('.server-info').slideDown();
$(this).text('Hide Info');
});

$("#collapse-icon").toggleClass('icon-arrow-down'); のようなものを試していました ただし、最初の切り替え後にアンカー テキストが上書きされるため、これは機能しません。

助けてくれてありがとう。

4

2 に答える 2

3

これを試してください-デモ

$('.collapse-info').toggle(function() {
    //$('.server-info').slideUp();
    $(this).find("i").removeClass("icon-arrow-up").addClass("icon-arrow-down");
    this.childNodes[1].nodeValue = "Show Info";
}, function () {
    //$('.server-info').slideDown();
    $(this).find("i").removeClass("icon-arrow-down").addClass("icon-arrow-up");
    this.childNodes[1].nodeValue = "Hide Info";
});
于 2013-02-17T23:10:50.387 に答える
0

まず、<i>タグはイタリック体のテキストに使用され、アイコンには使用されません。 あなたの質問に答えるために、変更したいタグ
に何らかの背景画像が割り当てられていると仮定しています。タグ内の要素ではなく、タグ自体に クラスを割り当ててみませんか。タグのhtmlを変更しても問題はありません。 js は次のようになります。<i>
<a>

$('.collapse-info').toggle(function() {
  $('.server-info').slideUp();
  $(this).text('Show Info');
  $(this).addClass('icon-arrow-down').removeClass('icon-arrow-up');
}, function () {
  $('.server-info').slideDown();
  $(this).text('Hide Info');
  $(this).addClass('icon-arrow-up').removeClass('icon-arrow-down');
});
于 2013-02-17T22:59:27.930 に答える