Question

HTML

<div class="lang-currency-field">
   <div class="lang-currency-links">links here</div>
</div>

的jQuery

<script>    
     $('.lang-currency-button').click(function() {
         $('.lang-currency-field').fadeIn();
     });    

     $('.lang-currency-links').click(function() {
        $('.lang-currency-field').fadeOut();
     });    

     $('.lang-currency-field').outside('click', function(){
         $('.lang-currency-field').fadeOut();
     });    
</script>

我在这里阅读了很多关于stackoverflow的文章和论坛，但由于某些原因我无法解决这个问题。

如何通过点击页面上的某个位置来关闭/淡出lang-currency-field div？

当我点击其中一个链接时它会很好，但是当我实际点击div时它没有。

你能帮帮我吗？谢谢。

Answer 1

我建议在div上使用一个处理程序来阻止事件冒泡，然后将“外部”处理程序委托给文档。 div上的处理程序可以防止div中的点击，但不会阻止文档级处理程序关闭div的链接。注意：你需要注意页面上的其他处理程序，它们要么允许点击以冒泡到文档（如果在你关闭的div之外），他们也负责关闭div，或者他们采取你完全到另一页（所以div不需要关闭）。如果停止在div之外的元素的处理程序中传播，则不会调用文档级处理程序。

<script>
     $(function() { // this will make sure the relevant DOM elements are loaded first   
        $('.lang-currency-button').click(function(e) {
            e.stopPropagation(); // because we don't want to close immediately after opening
            $('.lang-currency-field').fadeIn();
        });    

        $('.lang-currency-links').click(function(e) {
           e.stopPropagation(); // prevent bubbling since we don't need other handlers.
           $('.lang-currency-field').fadeOut();   
        });    

        $('.lang-currency-field').click(function(e){
            e.stopPropagation(); // prevent bubbling to document handler so div stays open when clicked inside, but not on a link
        });

        $(document).click(function() {
            $('.lang-currency-field').fadeOut();
        });
     });  
</script>

Answer 2

尝试

 $('page').click(function() { $('.lang-currency-field').fadeOut(); });

jquery click（）在div之外关闭div

2 个答案: