1

私はjQueryに関する本の中で問題をやっています。私は次のHTMLを持っています:

<div id="switcher" class="switcher">
  <h3>Style Switcher</h3>
  <button id="switcher-default">Default</button>
  <button id="switcher-narrow">Narrow</button>
  <button id="switcher-large">Large</button>
</div>

そして、タイトルをクリックしてボタンのオン/オフを切り替えようとしています。jQuery は次のとおりです。

$(document).ready( function () {
 $('#switcher h3').toggle(function() {
   $('#switcher button').addClass('hide');
}, function(){
   $('#switcher button').removeClass('hide');
});

何らかの理由で、ページの読み込み時に H3 要素 (タイトル) がすぐに非表示になり、選択できません。本当に、H3ではなく、ボタンが隠れているはずですよね？

CSSは次のとおりです。

.hide {
    display: none;
}
4

4 に答える 4

2

toggleevent メソッドは jQuery 1.8 で廃止され、jQuery 1.9 で削除されました。jQuery 1.9 はtoggledisplay メソッドを使用し、要素を非表示にします。

代わりにメソッドを使用clickしてtoggle 有効にすることができます。

$(document).ready( function () {
   $('#switcher h3').click(function(){
       $(this).siblings('button').toggle();
   })
});
于 2013-02-13T22:23:59.220 に答える
1

ハンドラーではなく、にclick()ハンドラーが必要です。h3toggle()

次に、を使用するtoggleClass()か、または単純toggle()に使用できます$('#switcher button')。

$(document).ready( function () {
  $('#switcher h3').click(function() {
   $('#switcher button').toggleClass('hide');
  });
});
于 2013-02-13T22:21:09.453 に答える
1

このコマンドtoggle()は、要素をすぐに非表示/再表示します。

あなたは探しているようです：

$(function () {
   $('#switcher h3').click(function() {
     $('#switcher button').toggle();
  }); 
});
于 2013-02-13T22:22:10.250 に答える
1

これは、現在の回答よりもわずかに高速です。

$(function () {
   var switcher = $('#switcher');
   switcher.find('h3').click(function() {
     switcher.find('button').toggle();
  }); 
});
于 2013-02-13T22:27:57.750 に答える