javascript - 我无法获得定位父 div 和父 sibling 的按钮

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 内的按钮(或图片)一样展开。我已经接近于通过单击“按钮”和 $(this).parent.toggleclass 使其工作，但我似乎无法让“removeClass”在其他 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