0

OK、<aタグを削除するトグル関数を呼び出すタグがあります<td。そのaタグには&lt;&lt;...<<

関数では、トグルが実行されたときにに変更<<したいと考えています。>>動いていない。私は何を間違っていますか？

html:

<td class="filter_td" id="filter_td">
  <td class="show_hide">
            <a href="javascript:toggleFilters();" id="show_hide" alt="Hide Filters" title="Hide Filters">&lt;&lt;</a>
        </td>

jquery:

   function toggleFilters()
{
    var td = $("#filter_td");
    td.toggle('slow');
    if (td.css("display") == "none")
    {
        $("#show_hide").html("&gt;&gt;").attr('title', 'Show Filters');
    }
    else
    {
        $("#show_hide").html("&lt;&lt;").attr('title', 'Hide Filters');
    }
}
4

2 に答える 2

2

テキストを変更するコードを「トグル」のコールバックに入れます。そうすれば、アニメーションが完了し、要素の表示状態が完了したことがわかります。このようなもの：

var td = $("#filter_td");
td.toggle('slow', function () {
    if (td.not(":visible"))
    {
        $("#show_hide").html("&gt;&gt;").attr('title', 'Show Filters');
    }
    else
    {
        $("#show_hide").html("&lt;&lt;").attr('title', 'Hide Filters');
    }
});

また、非表示のチェックをjQueryの「.not()」に変更しました。これは、単純にスタイリング (定義されていない場合があります) を見るのではなく、要素が実際にページに表示されているかどうかを判断するより一般的な方法です。

于 2012-08-29T13:37:45.940 に答える
1 
$("#show_hide").on('click', function() {
    var td = $("#filter_td"),
        state = td.is(':visible');
    td.toggle('slow');
    $("#show_hide").html(state?"&gt;&gt;":"&lt;&lt;")
                   .prop('title', (state?'Hide':'Show')+' Filters');
});

フィドル

于 2012-08-29T13:45:13.960 に答える