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 删除contactexpandclass并添加contact. 在这一点上，我只是给容器元素一个id（或者class如果你愿意的话），只是为了让事情变得更简单。然后你做的很简单：

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

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

});

但是，当单击新类 .contactexpand 时，这当然不应该发生。

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

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

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

    e.stopPropagation();

});

Working example

于 2013-03-12T12:34:30.700 回答
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

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

$(".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 
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 回答