3

以下のスクリプトでは、「toggleExtras」スパンの最初のクリックが機能します。しかし、その後のクリックは何もしません。on（'click'）メソッドをtoggleClassと一緒に使用して、切り替えられた状態と切り替えられていない状態の両方のイベントを定義しようとしています。

    jQuery(document).ready(function()
    {
        jQuery('.toggleExtras').on('click', function(e)
        {
            //jQuery('.extras').slideToggle(); //This works but bounces twice.
            jQuery('.extras').show();
            jQuery('.toggleExtras').text('Hide Advanced Options');
            jQuery('.toggleExtras').toggleClass('toggleExtras toggleExtrasHide');
        });

        jQuery('.toggleExtrasHide').on('click', function(e)
        {
            jQuery('.extras').hide();
            jQuery('.toggleExtrasHide').text('Show Advanced Options');
            jQuery('.toggleExtrasHide').toggleClass('toggleExtrasHide toggleExtras');
        });
    });

HTML：

    <span class="toggleExtras">Show Advanced Options</span>
4

1 に答える 1

3

.toggleExtrasHide初期化時に存在しないためです...

私はあなたのコードを次のように書き直します：

jQuery('.toggleExtras').on('click', function(e){
  jQuery('.extras').toggle();
  jQuery(this).text(function(el, currentValue){
    return currentValue == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced Options";
  });
});

デモ： http： //jsfiddle.net/xbLc2/

詳細については、 http .toggle()：//api.jquery.com/toggle/をご覧ください。詳細については、http ： //api.jquery.com/text/
をご覧ください。.text()

于 2013-02-26T03:49:01.783 に答える