Question

我的jquery技能很弱而且杀了我。截止日期即将来临。所以，我有这个HTML：

<div class="productbox"><button>1</button></div>
<div class="productbox"><button>2</button></div>
<div class="productbox"><button>3</button></div>
<div class="productbox"><button>4</button></div>
<div class="productbox"><button>5</button></div>
<div class="productbox"><button>6</button></div>
<div class="productbox"><button>7</button></div>

使用此功能

$(function() {
$(".productbox").click(function() {
    $(this).toggleClass( "expandthebox", 1500 ),   
   $(".productbox").not(this).removeClass("expandthebox", 1500); 
    return false;
  });
});

这很好用，但点击是在div而不是div中的按钮上。我想让div扩展，就像他们点击div中的按钮（或图片）一样。我已经接近使用点击＆＃34;按钮＆＃34;和$（this）.parent.toggleclass但我似乎无法获得＆＃34; removeClass＆＃34;在其他div上工作。如此疲惫和胡思乱想，真的希望有人会帮助我。提前谢谢。

Answer 1

这个怎么样

$(function() {
    $(".productbox button").click(function() {
        var $parentDiv = $(this).closest('.productbox');
        $parentDiv.toggleClass( "expandthebox", 1500 ),   
        $(".productbox").not($parentDiv).removeClass("expandthebox", 1500); 
        return false;
    });
});

工作fiddle

Answer 2

您可以选择父母的兄弟姐妹并删除该课程。

$(function () {
    $("button").click(function () {
        $(this).parent().toggleClass("expandthebox", 1500);
        $(this).parent().siblings().removeClass('expandthebox', 1500)
        return false;
    });
});

Fiddle

Answer 3

假设按钮有class="clickme"。

$('.clickme').click(function() {
    $(this).closest('.productbox').addClass('expandthebox', 1500);
});

您可以从中扩展。

之前我遇到过这样的问题，但这解决了这个问题。现在让我解释一下。 .closest()将使用class="productbox"获取最接近的项目，这意味着它将采用它的父项，因为它最接近，并且它将始终是。选择父级后，您可以自由设置它的动画。

Answer 4

试

$(function() {
$(".productbox").click(function() {
     $(".productbox").removeClass("expandthebox"); 
     $(this).addClass( "expandthebox", 1500 );  
    return false;
  });
});

我无法获得按钮来定位父div和父兄弟

4 个答案:

Fiddle