2011-08-02 12 views

答えて

1

を使用することができます。

あなたはそれが表示されているか、隠された場合を示した場合にセクションを非表示にしますtoggleSection()という関数にクリックイベントをバインド、またはちょうどこの次のいずれかを使用します

$('.section.hidden').click(function() { 
    $(this).toggle(); 
}); 
0

あなただけの機能を再バインドする必要はありません

$('.section-legend, .section-collapse').click(hidesection); 

function hideSection() { 
    $(this).addClass('hidden'); 
} 
0

jQueryの何を達成するための簡単な方法を提供していますがあなたは何をしたい:

.toggleClass()

あなたが手で変更を実装する必要がありますが、むしろ、ワンクリック結合

では動作しません。その方法は、

あなただけのオブジェクトを隠し、表示したいでしょうもちろんの場合は、手でそれをコーディングするのではなく、

.toggle()

を使用することができます。 これは主にJavascript-Frameworksがあなたのために行うことですが、既存の機能を実装し、自分で実装するのではなく、取り入れることができます。また、クロスブラウザーの非互換性が(ほとんど)処理されます。

本当にjQueryを最大限に活用したい場合は、The jQuery APIを掘り下げて、提供しているすべての機能を理解してください。そうすれば、既存の機能を開発するために、時間を節約できます。

0

必要なものだけが表示されている場合は、トグルを使用してください。セクションを隠すためのカスタムCSSをお持ちの場合は、toggleClassを使用してください。説明するには

<script type="text/javascript"> 
    $(function() { 

     $('p').click(function() { 
      $('#book').toggle(); 



      // In javascript, just like many C-derived languages, you can pass 
      // the method's pointer to a variable in. 
      // hidden is the custom class you add and remove from a section 
      f = $('#great').is('.hidden') ? funky : hacky; 

      f($(this)); 



      $('#great').toggleClass('hidden'); 

      $('#amazing').toggleClass('man'); 

      alert($('#great').attr('class') + ' ---- ' + $('#amazing').attr('class')); 
     }); 


     function funky(section) { 
      $(section).html('this is funky!'); 
     } 

     function hacky(section) { 
      $(section).html('this is hacky!'); 
     } 

    }); 
</script> 

<div id='book' style='display: none'>Hello</div> 

<div id='great' class='diz hidden whatever'>Hai</div> 
<div id='amazing' class='spider'>Hai</div> 

<p>Stackoverflow rules!</p> 

セクションを非表示にする場合は、style=display: noneをタグに付けます。カスタム隠蔽/書式設定の場合は、toggleClassを使用します。

関連する問題