0

問題をもう少し定義しましょう。

私は持っています

    <div class="contact">
      <div id="form"></div>
      <div id="icon"></div>
    </div>

をクリックして#icon、のクラスをに変更し.contactます.contactexpand（または単に追加します）。

次に、本体をクリックしてクラスを元に戻したいのですが、もちろん、新しいクラスをクリックしても発生しないはずです.contactexpand。可能であれば、アイコンをもう一度クリックすると、クラスが元に戻ります。

たくさんの例と組み合わせを試しましたが、正しい結果と動作を得ることができませんでした。

4

5 に答える 5

3

これをチェックして：Working example

ステップバイステップで行きましょう

#iconをクリックして、.contactのクラスを.contactexpandに変更します（または単に追加します）。[…]そして可能であれば、アイコンをもう一度クリックすると、クラスが再び元に戻ります。

toggleClass()これを達成するためにメソッドを使用したいとします。単に：

$('#icon').on('click', function(e){

    $(this).parent()
    .toggleClass('contact')
    .toggleClass('contactexpand');

});

次に、ボディをクリックしてクラスを元に戻します

クラスをbody 削除してをcontactexpand追加contactすることを確認する必要があります。この時点で、物事を簡単にするために、コンテナ要素にid（または必要classに応じて）を指定します。次に、あなたがすることは非常に簡単です：

$('body').on('click', function(e){

 $('#thisdiv')
 .removeClass('contactexpand')
 .addClass('contact');

});

しかしもちろん、新しいクラス.contactexpandをクリックしても発生しないはずです。

これは他の答えが逃したステップだと思います。クリックするたびにbody要素もクリックするため、常にクリックイベントがトリガーされbody、クラスが削除されcontactexpandて追加されcontactます。

を入力しevent.stopPropagation()ます。このメソッドは、イベントがDOMをバブルアップbodyせず、クリックをトリガーしないことを確認します。

$('#thisdiv').on('click', function(e){

    e.stopPropagation();

});

Working example

于 2013-03-12T12:34:30.700 に答える
0

次のコードのように、親要素にクラスを追加できます。

$(".contact #icon").click(function(){
  var element = $(this).parent(".contact");
  element.removeClass("contact").addClass("contactexpand");
});
于 2013-03-12T12:11:19.743 に答える
0

私はjQuerysのtoggleClass関数が次のようになっているのが好きです。

$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});

または、トグルするのではなく、追加したい場合は、addClass（'className'）とremoverClass（'className'）を使用できます:)

次に例を示します。http：//jsfiddle.net/aUUkL/

ページの本文にonclickイベントを追加し、hasClass（'className'）を使用して、本文がクリックされたときにクラスを切り替えるかどうかを確認することもできます。あなたはこのようなものを使うことができます（私はこのビットをテストしていませんが！）：

$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
    $('#contactbox').addClass('contact');
    $('#contactbox').removeClass('contactexpand');
}
});
于 2013-03-12T12:19:43.243 に答える
0

あなたはこれを行うことができます

$('body').on('click', function(event) {

    if ($(event.target).attr('id') == 'icon') {
        $(event.target).parent().toggleClass('contactexpand');
    } else {
        $('.contact').removeClass('contactexpand');
    }

});

このjsfiddleをチェックしてください

于 2013-03-12T12:25:29.503 に答える
0 
var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
    e.stopPropagation();
    $contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});

$(document).on('click', function(e) {
    if (e.srcElement === $contact[0]) return;
    $contact.find('#icon').trigger('click', true);
});

http://jsfiddle.net/kZkuH/2/

于 2013-03-12T12:35:00.373 に答える