JQuery：與調用對象onClick的父對象相關的問題

Question

如果您想在這個單頁網站中發現問題，請點擊鏈接，然後框中的內容會滑落，但它也需要一個關閉功能才能恢復。問題是關閉按鈕位於要動畫的元素中，所以需要由它的父項調用，我假定。我已經嘗試了各種不同的方法來完成這一點，但似乎沒有任何工作。如果您轉到http://upsilon.lunariffic.com/~swstr0並單擊關於 - > Sarah Weintraub，請嘗試單擊關閉鏈接。沒有任何反應，也沒有錯誤。那麼該怎麼辦？這裏有一個例子：

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery("li.btn-home a").click(function(){ 
     jQuery(this).parent.slideUp("slow"); 
     return false; 
    }); 
}); 
</script> 

Answer 1

嘗試這樣，

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery("a.close-con").click(function(){ 
     jQuery(this).parents("div#panel").slideUp("slow"); 
     return false; 
    }); 
}); 
</script> 

.parent()會遍歷了只有一個水平，爲.parents()會遍歷父母的父母

編輯：全球選擇[需要的jQuery 1.7+]

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery("body").on("click","a.close-con", function(){ 
     jQuery(this).parents("div#panel").slideUp("slow"); 
     return false; 
    }); 
}); 
</script> 

Answer 2

試試這個： -

$(".close-con").click(function(){ 
    $("#panel").animate({height:"0px"},800); 
}); 

UPDATE

我覺得我得到了這個問題： -

當我檢查你的源代碼，它顯示下面的結構我即我要求添加的代碼添加在該行下面的頁腳「 <script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/themes/swsg/js/functions.js?ver=20131209'></script>」中，如下所示： -

<script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/themes/swsg/js/functions.js?ver=20131209'></script> 
<script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/plugins/logo-slider/jquery.cycle.all.min.js?ver=3.9.1'></script> 
<script type="text/javascript"> 
    jQuery(function($) { 
    $("li.btn-slide a").on('click', function(e){ 
     e.preventDefault(); 

     var post_url = $(this).attr("href"); 
     var post_id = $(this).attr("rel"); 

     $("#page-con").html("loading...") 
         .load(post_url, function() { // content loaded callback 

      var pageconHeight = $("#page-con").height(); // Find the height of the content inside #panel 
      $("#panel").animate({height: pageconHeight}, "slow"); // Animate the height of #panel 

     }); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
    jQuery("li.btn-home a").click(function(){ 
     jQuery("#panel").animate({height:0}, "slow"); 
     return false; 
    }); 
}); 
</script> 

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery("a.close-con").click(function(){ 
     jQuery(this).parents("div#panel").animate({height:0}, "slow"); 
     return false; 
    }); 
}); 
</script> 

因此，這裏的函數.js文件正在創建關閉鏈接功能的工作問題。所以，你所要做的採取必要的代碼，即什麼： -

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery("a.close-con").click(function(){ 
      jQuery(this).parents("div#panel").animate({height:0}, "slow"); 
      return false; 
     }); 
    }); 
    </script> 

並粘貼在它上面： -

<script type='text/javascript' src='http://upsilon.lunariffic.com/~swstr0/wp-content/themes/swsg/js/functions.js?ver=20131209'></script> 

這將解決您的問題。