jQuery：遇到麻烦，并且CSS有多个选择器

Question

我有许多div（CSS类“ group”），当单击其中一个时，其他隐藏，然后单击其中的一个扩展（获得“详细” CSS类）。 然后，当单击扩展的div（'.group .detailed）时，它应该调整大小并失去'detailed'类。 我的问题是，我无法在“组” div上获得单击事件，该事件也包含“详细信息”，我的第一个jquery函数将其忽略并激活我的第二个jquery函数。 这是我的代码：

$('.group:not(.detailed)').mousedown(function(){
    var $self = $(this);
    var speed = 3250;
    var offset = {x : $self.offset().left, y : $self.offset().top};

    readyAnimation();

    $('.group').not($self).addClass('hide');
    $self.animate({'width' : '100%', 'height' : '+=' + '300px'}, {left: 'offset.x' + 'px', top: 'offset.y' + 'px'}, speed);

    function readyAnimation () {
        $self.css({display : 'block'});
        $self.css({'-webkit-box-sizing' : 'border-box', '-moz-box-sizing' : 'border-box', 'box-sizing' : 'border-box'});
        $self.css({margin : '0px'});
    };

    $self.addClass('detailed');
});


$('.group.detailed').mousedown(function(){
    var $self = $(this);
    var size = '300px';
    var speed = 3250;

    console.log("it worked");

    resetAnimation();

    $self.animate({'width' : size, 'height' : size}, speed)
    $('.group').removeClass('hide');

    function resetAnimation () {
        $self.css({display : ''}); //Empty quotes resets the CSS value to what it was originally (in the CSS file)
        $self.css({'-webkit-box-sizing' : '', '-moz-box-sizing' : '', 'box-sizing' : ''});
        $self.css({margin : ''});
    };

    $self.removeClass('detailed');
});

我不认为我需要张贴我的HTML和CSS这一点，但他们可以看到这里前一个问题我问。 谢谢阅读。

编辑： 这是小提琴的链接

编辑2：有关该代码的工作演示，请参见vahapwns，Jonathan和giordanolima的答案。 通过将两个功能组合在一起并使用if语句检查“详细”，解决了第一个功能覆盖第二个功能所引起的问题。 感谢大家的投入。

Answer 1

选择两个jQuery选择并将它们合并为一个，使用if()检查是否为.detailed 。 您还应该将这些额外的功能移到外面，以便每个功能仅定义一次。

我已经为您重新安排了逻辑，现在您需要微调动画序列： http : //jsfiddle.net/V93dq/2/

Answer 2

@vahanpwns是正确的，请尝试以下一种方法：

http://jsfiddle.net/V93dq/1/

基本上，您可以使用hasClass jQuery方法。

$('.group').mousedown(function(){
    var $self = $(this);

    if($self.hasClass("detailed")){

    }else{

    }
});

Answer 3

看看这里...我使用了hassClass条件...我认为更好...并且我阻止了链接Default ...

芬德

function readyAnimation (mySelf) {
    mySelf.css({display : 'block'});
    mySelf.css({'-webkit-box-sizing' : 'border-box', '-moz-box-sizing' : 'border-box', 'box-sizing' : 'border-box'});
    mySelf.css({margin : '0px'});
};

function resetAnimation (mySelf) {
    mySelf.css({display : ''}); 
    mySelf.css({'-webkit-box-sizing' : '', '-moz-box-sizing' : '', 'box-sizing' : ''});
    mySelf.css({margin : ''});
};

$('.group').mousedown(function(){
    if(!$(this).hasClass("detailed")){
        var $self = $(this);
        var speed = 3250;
        var offset = {x : $self.offset().left, y : $self.offset().top};
        readyAnimation($self);
        $('.group').not($self).addClass('hide');
        $self.animate({'width' : '100%', 'height' : '+=' + '300px'}, {left: 'offset.x' + 'px', top: 'offset.y' + 'px'}, speed);
        $self.addClass('detailed');
    }else{
        var $self = $(this);
        var size = '300px';
        var speed = 3250;
        resetAnimation($self);
        $self.animate({'width' : size, 'height' : size}, speed)
        $('.group').removeClass('hide');
        $self.removeClass('detailed');
    }

}).find('a').click(function(e){e.preventDefault();});;