1

以下の2つの状態を切り替えるトグルボタンの一種にjqueryを使用しようとしています。

トグルA

トグル B

そのため、トグル ボタン/リンクをクリックすると、図 A (赤い線の上) のすべてが非表示になり、トグル ボタンをもう一度クリックすると、再び表示されます。

私はJquerysのtoggleClass関数を調べてきました。

$("button").click(function(){
$("p").toggleClass("main");
});

しかし、これは HTML ではなく CSS のみを非表示にすると信じています。私は機能を誤用していますか、それともこれに適していませんか?

ありがとう

4

7 に答える 7

3

これが実際の例です：

http://jsfiddle.net/pV7Qe/

<div class="header">header</div>
<div class="menu">
    <div class="my-toggle">toggle</div>
</div>
<div class="content">
content            
</div>

.header
{
    background:lime;
}
.menu
{
    height:100px;
    background:gray;        
}
.my-toggle
{
    width:100px;
    background:red;
    cursor:pointer;
}
.content
{
    height:500px;            
    background:#ddd;
}​

$(".my-toggle").click(function() {
  $(".header").slideToggle();
});
于 2012-07-05T19:54:55.270 に答える
2

赤い線より上にあるものすべてを、一意の ID を持つ単一の包含要素に入れることができれば、.toggle()その単一の要素に対して jQuery 関数を使用するだけで、目的を達成できます。

于 2012-07-05T19:48:11.047 に答える
1

2 つのクラスを考える

.hide{visibility: hidden;}
.show{visibility: visible;}

このJQueryコードを使用してください

$("button").click(function(){
$("p").toggleClass('hide','show');
});

これで問題は解決します。

于 2012-07-05T19:53:50.017 に答える
0

slideToggle()、toggle()または_toggleClass('hidden')

.hidden {
    display: none;
}

参考文献:

于 2012-07-05T19:58:58.540 に答える
0

toggleClass を使用し、非表示のクラスに追加の CSS を使用する理由はありません。

より良い効果を得るには、トグルまたはスライドトグルを使用するだけです。

私の唯一の追加の入力は、代わりに

$('.buttons').click(function(){
    $('#div').slideToggle();
});

「on」を使用する方が良いと思います

$('.buttons').on('click', function(){
    $('#div').slideToggle();
});
于 2012-07-05T20:04:53.357 に答える
0

トグル機能を使ってみてください。

$("idOfButton").click(function(){
    $(".main").toggle();
});
于 2012-07-05T19:47:28.817 に答える
0

パラメータなしでトグル関数を使用します。

   $("button").click(function(){
$("p").toggleClass();
});

これはうまくいくはずです。

于 2012-07-05T19:48:08.467 に答える