從下拉菜單列表項

Question

我使用下面的jQuery隱藏在查詢一個div隱藏一個單獨的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＃下拉-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/

記住：正在被查詢ROWID產生的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

你可以嘗試這樣的事情：

$('.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（S）作爲目標，應用單擊處理使用delegated-events approach來爲孩子定位元素。然後，您使用closest('div')選擇容器並將其應用於該容器。

更新：

在看到your jsFiddle，這裏是一個更新的答案，將隱藏在div這是不是你實際上點擊元素的父母或子女。

我已經使用下拉的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

你的第一次嘗試，幾乎確定

相反父（ 'DIV'）使用父母（ 'DIV'）的，就像這樣：

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

希望它幫助！