私はクリックでコンテンツを押し下げ、このjqueryのコードを有する異なる#ID

Question

に追加するには、私のjqueryのスクリプトを修正したいと思います。だから、もしスクリプトが== noneを表示するとしたら、ユーザーは＃author-dropdownを見なければならず、display == blockのときidは＃author-dropdown-extendedになるはずです。このスクリプトを修正するにはどうしたらよいですか？

Answer 1

$('#author-dropdown').attr("id","author-dropdown-extended").slideDown(); 

もが

$('#showhide').click(function() { 
    if($('.author-dropdown').is(':hidden')) { 
     $('.author-dropdown').slideDown().removeClass('author-dropdown').addClass('author-dropdown-extended'); 
    } else { 
     $('.author-dropdown').slideUp().removeClass('author-dropdown-extended').addClass('author-dropdown'); 
    } 
    return false; 
    }); 

Answer 2

文書のIDを動的に変更しないでください。そのためには、class属性を使用してください。しかし、あなたはあなたが本当にしたいことができるかどうか - のjQueryを使用して1.6+：

var $elem = $('#author-dropdown'); 
$elem.prop('id', 'new-id'); 

を古いjQueryのバージョンでは、ちょうど.attr()の代わり.prop()を使用しています。

Answer 3

このスクリプトの一部を改正...

$('#author-dropdown-extended').attr("id","author-dropdown").slideUp(); 

私は個人的にかかわらず、このような何かをしようと、元の状態に戻ってそれを設定するには、次の変更しますか？これを試して。

$(document).ready(function() { 
    $('#showhide').click(function() { 
     if ($('#author-dropdown').css('display') == 'none') { 
      $('#author-dropdown-extended').slideUp('fast', function() { 
       $('#author-dropdown').slideDown('slow'); 
      }); 
     } else { 
      $('#author-dropdown').slideUp('fast', function() { 
       $('#author-dropdown-extended').slideDown('slow'); 
      }); 
     } 
     return false; 
    }); 
});