Question

这可能是一个简单的问题（特别是对于JQuery大师），但是我不知道。

当用户单击Login / Register超链接并使用toggleClass函数显示和隐藏负载时，我使用jQuery.support.cors函数从另一个页面远程加载表单。那部分有效。我的问题是，当用户点击页面上的任何其他位置时，我还需要包含表单的div。

P.S。（表单不得在悬停时显示，这是一个全部点击功能）

这是我修改过的代码（基本上是因为我不能在小提琴或code.pen中做support.cors

<li class="retrodropdown" aria-haspopup="true">
   <a href="#">Sign In / Register</a>
   <div class="retrodropdown-menu">
      <ul>
         <li>
            <div class="login-form">
               SHOW AND HIDE          
            </div>
        </li>
     </ul>
   </div>
</li>

这是我的JQuery

$(document).ready(function () {

   $('.retrodropdown a').click(function () {
      $(this).siblings('.retrodropdown-menu').toggleClass('block', 'hidden');
   });

   $('html').click(function () {
      $(this).find('.retrodropdown-menu').hide();
   })
});

这是CODEPEN

提前致谢

Answer 1

查看此http://codepen.io/anon/pen/NPYzoz

基本上你抓住了文档上的主要点击事件，然后检查点击是否在表单之外。如果是这样，你隐藏它，并且不要忘记在显示它的click事件上stopPtopagation，否则它将再次触发文档点击，这将隐藏它。

$(document).ready(function () {

      $('.retrodropdown a').click(function (event) {
           $('.retrodropdown-menu').toggle();
           event.stopPropagation();
           event.preventDefault();
           return;
      });

      $(document).on('click',function (event) {           
        if(!$(event.target).closest('.retrodropdown-menu').length) {               
                if($('.retrodropdown-menu').is(":visible")) {                
                    $('.retrodropdown-menu').hide()
                    event.stopPropagation();
                    event.preventDefault();
                    return;
                }
            }    
      })
    });

Answer 2

$(document).ready(function () {

   $('.retrodropdown a').click(function () {
      $(this).siblings('.retrodropdown-menu').show();
   });

   $('html').click(function () {
      $(this).find('.retrodropdown-menu').hide();
   })
});

Answer 3

$(document).click(function(e){
    $(this).find('.retrodropdown-menu').hide();
});

使用不同的触发器进行div显示/隐藏 - jquery

3 个答案: