jQuery 在另一个 div 上更改 div 类，然后在单击正文时改回

change div class onclick on another div, and change back on body click

提问by JanBo

Let me define the problem a little bit more:

让我再定义一下这个问题：

i have

我有

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

i want onclick on #icon, to change the class of .contactto .contactexpand( or just append it).

我想 onclick on #icon，将类更改.contact为.contactexpand（或只是附加它）。

Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.

然后我希望在身体上单击以将类更改回来，但是当然在单击新类时不应该发生这种情况.contactexpand，如果可能，再次单击图标将类再次更改回来。

I tried numerous examples and combinations but just couldn't get the right result and behavior.

我尝试了许多示例和组合，但无法获得正确的结果和行为。

回答by Sunyatasattva

Check this: Working example

检查这个： Working example

Let's go step by step

让我们一步一步来

I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.

我想点击#icon，将 .contact 的类更改为 .contactexpand（或只是附加它）。[...] 如果可能的话，再次点击图标将类再次更改回来。

You want to use the toggleClass()method to achieve this. Simply:

您想使用该toggleClass()方法来实现这一点。简单地：

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

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

});

Then i want that the on body click to change the class back

然后我希望身体上的点击将班级改回来

You will have to make sure that bodyremoves contactexpandclassand adds contact. At this point I would just give the container element an id(or classif you prefer), just to make things simpler. Then what you do is pretty simple:

您必须确保body删除contactexpandclass并添加contact. 在这一点上，我只是给容器元素一个id（或者class如果你喜欢），只是为了让事情更简单。然后你要做的很简单：

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

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

});

but of course that shouldnt happen when clicking on the new class .contactexpand.

但是当点击新类 .contactexpand 时，当然不应该发生这种情况。

This is the step that the other answers missed, I think. Since everywhere you click, you also click on the bodyelement, you will always trigger the click event on the body, hence removing the contactexpandclass and adding the contactone.

我认为这是其他答案遗漏的步骤。由于您点击的任何地方，您也会点击body元素，您将始终触发 上的点击事件body，因此删除contactexpand类并添加contact一个。

Enter event.stopPropagation(). This method will make sure that the events doesn't bubble upthe DOM, and will not trigger the bodyclick.

输入event.stopPropagation()。此方法将确保事件不会在 DOM 中冒泡，并且不会触发body点击。

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

    e.stopPropagation();

});

Working example

Working example

回答by dfsq

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/

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

回答by Imran Rashid

You can add a class to parent element like the following code.

您可以像下面的代码一样向父元素添加一个类。

$(".contact #icon").click(function(){
  var element = $(this).parent(".contact");
  element.removeClass("contact").addClass("contactexpand");
});

回答by user1636130

I like to the jQuerys toggleClass function like so:

我喜欢 jQuerys toggleClass 函数，如下所示：

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

Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)

或者你可以使用 addClass('className') 和 removerClass('className') 如果你想附加它而不是切换它:)

Here is an example: http://jsfiddle.net/aUUkL/

这是一个例子：http: //jsfiddle.net/aUUkL/

You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):

您还可以在页面正文中添加一个 onclick 事件，并使用 hasClass('className') 来查看是否在单击正文时切换类。你可以使用这样的东西（虽然我还没有测试过这一点！）：

$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
    $('#contactbox').addClass('contact');
    $('#contactbox').removeClass('contactexpand');
}
});

回答by riccardolardi

You can do this

你可以这样做

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

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

});

Check out this jsfiddle

看看这个jsfiddle