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

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是由查询的行生成的，所以我必须使用父/子/最接近我的选择器…只是不确定是哪一个

编辑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

你的第一次尝试几乎ok

用parents('div')代替parent('div')，如下:

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

希望有帮助!

Answer 2

您可以尝试这样做:

$('.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");
});

这将.dropdowndiv作为目标，使用委托事件方法将单击处理程序应用于子锚元素。然后使用closest('div')选择容器并应用效果。

<标题>更新:

看到你的jsFiddle，这里是一个更新的答案，将隐藏div，它不是你实际点击的元素的父或子。

我已经使用了id属性的下拉的div容器作为两者之间的共同链接。所以得到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');
});

小提琴