更新

Question

我在点击选择器元素时使用以下jquery隐藏查询中的div：

$(function() { // Shorthand for $(document).ready(function() {
      $('.decline').click(function() {
            $(this).closest('div').animate({backgroundColor: '#003'}, 'slow').
                  animate({opacity: 'hide'}, 'slow');
      });
});

这是目前正在使用的行和按钮;用户点击按钮，div就会消失。

<div class="<?php echo ($accept == '1')?'showop':'show';?>">
<span class="namecustcoltype"><?php echo $record;  ?></span>
<span><a href="#" **class="decline"** **data-dropdown="#dropdown-1**"  id1="<?php echo $id1; ?>" data-order1="<?php echo $name; ?>"><input type="button" title="declined" value="Decline" /></a></span>
</div>

我现在已经在按钮上添加了一个下拉菜单;它由id＃dropdown-1添加到按钮中，下拉列表如下：

<div id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
         <li><a href="#1" class="decline"><span>Option One</span></a></li> 
        <li><a href="#2">Option Two
</a></li>
    </ul>
</div>

现在我想更改动画的功能，并在用户点击下拉项时执行它。 div ID和类是查询的一部分，不能用作选择器（同一页面上有许多相同的内容）。

根据另一个用户的建议，我按照以下方式尝试了父选择器：

jQuery('.decline').click(function () {
    jQuery(this).parent('div').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
});

但这也没有奏效。

如果有人对我可能做错了什么有任何想法，我会很感激他的帮助！

为添加的JSFIDDLE编辑：http://jsfiddle.net/2hvzM/1/

请记住：div ID是由查询的rowid生成的，所以我必须使用父/子/最接近我的选择器......只是不确定哪一个。

使用scrowler的解决方案和我的补充编辑：

$('.dropdown ul li').on('click', 'a', function(e) {
    e.preventDefault();
    var dropdownID = $(this).closest('div').attr('id');
    // find the .show div by this ID and apply effects
    var showDiv = $('a[data-dropdown="#' + dropdown-1 + '"]').closest('div.show');
    showDiv.animate({backgroundColor: '#003'}, 'slow').animate({opacity: 'hide'}, 'slow');
});

Answer 1

您可以尝试这样的事情：

$('.dropdown ul li').on('click', 'a', function(e) {
    e.preventDefault(); // this prevents your anchor doing its default behaviour (redirect)
    $(this).closest('div').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
});

这会将.dropdown div定位为目标，使用delegated-events approach将点击处理程序应用于子锚点元素。然后使用closest('div')选择容器并将效果应用于它。

更新

看过your jsFiddle后，这里有一个更新的答案，会隐藏不是您实际点击的元素的父母或子女的div。

我已使用下拉列表容器的id属性作为两者之间的公共链接。因此，获取id，使用它来查找您单击以触发下拉列表的原始按钮，找到其中的父div.show，并对其应用效果。

$('.dropdown ul li').on('click', 'a', function(e) {
    e.preventDefault();
    var dropdownID = $(this).closest('div').attr('id');
    // find the .show div by this ID and apply effects
    var showDiv = $('a[data-dropdown="#' + dropdownID + '"]').closest('div.show');
    showDiv.animate({backgroundColor: '#003'}, 'slow').animate({opacity: 'hide'}, 'slow');
});

Fiddle

Answer 2

你的第一次尝试几乎没问题

而不是父母（＆＃39; div＆＃39;）使用父母（＆＃39; div＆＃39;），如下所示：

jQuery('.decline').click(function () {
    jQuery(this).parents('div').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
});

希望它有所帮助！

从下拉菜单列表项中隐藏单独的DIV

2 个答案:

更新