更改div类onclick在另一个div上，然后重新更改为主体单击 [英] change div class onclick on another div, and change back on body click

问题描述

让我再定义一下问题:

我有

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

我要在#icon上单击，以将.contact的类更改为.contactexpand(或仅附加它).

然后我希望单击主体以将班级改回原来的班级，但是当单击新班级.contactexpand时当然不应该发生这种情况，并且如果可能的话，再次单击图标可以再次将班级改回来.

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

解决方案

检查此内容: 工作示例

让我们一步一步走

我想在#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上的click事件，因此删除了contactexpand类并添加了contact类.

输入 event.stopPropagation() .此方法将确保事件不会破坏 DOM，并且不会触发body点击.

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

    e.stopPropagation();

});

工作示例

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 .contact to .contactexpand( or just append it).

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.

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

解决方案

Check this: 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.

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

$('#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 body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:

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

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

});

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

This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.

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

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

    e.stopPropagation();

});

Working example

这篇关于更改div类onclick在另一个div上，然后重新更改为主体单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！