Question

让我更多地定义问题：

我有

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

我希望点击#icon，将.contact的班级更改为.contactexpand（或只是追加它）。

然后我希望on body上单击以更改类，但当然在单击新类.contactexpand时不会发生这种情况，如果可能的话，再次点击图标会再次更改类。< / p>

我尝试了很多例子和组合但却无法获得正确的结果和行为。

Answer 1

选中此项： Working example

让我们一步一步走

我希望在#icon上单击，将.contact的类更改为.contactexpand（或者只是追加它）。 [...]如果可能的话，再次单击图标会再次更改课程。

您希望使用toggleClass()方法来实现此目的。简单地：

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

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

});

然后我希望on body上点击以更改课程

您必须确保body removes contactexpand class和adds 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

Answer 2

您可以将类添加到父元素，如下面的代码。

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

Answer 3

我喜欢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');
}
});

Answer 4

你可以这样做

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

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

});

查看此jsfiddle

Answer 5

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/

在另一个div上更改div类onclick，然后在body click上更改

5 个答案:

让我们一步一步走