javascript - jquery中的嵌套选择器

Question

我需要在嵌套的 div 上调用 jquery.animate。div结构是这样的

<div id="jsPlumb_1_4" class="container">
       <div id="PlanItemPL1" class="PlanItem">
            <div id="window1" class="window">
            </div>
        </div>
</div>

我对在div类窗口上做mousedown事件、动画事件等操作很感兴趣。有人可以让我知道我应该写什么选择器。谢谢您的帮助。

Answer 1

我建议，在问题中没有进一步的细节，一个通用的方法：

$('#jsPlumb_1_4').on('mousedown', function(e){
    $(this).find('div.window').animate({'width' : '100px'}, 1000);
});

JS 小提琴演示。

在此演示中，我将mousedown事件绑定到#jsPlumb_1_4元素（事件将从其任何子元素传播），并animate()在包含的div.window元素上触发。

为了让它更有趣一点，我mouseup也添加了一个事件，以便在mousedown缩小div.window时，在mouseup它上面增长：

$('#jsPlumb_1_4').on('mousedown mouseup', function(e){
    var newWidth = e.type == 'mousedown' ? '50%' : '80%';
    $(this).find('div.window').animate({'width' : newWidth}, 1000);
});​

JS 小提琴演示。

e.type检索事件（mouseup或mousedown），newWidth变量是50%或80%取决于事件是否等于mousedown。