时间戳

首页 > 解决方案 > 在 JQuery 中使用切换但在单击外部 div 时需要关闭

javascript - 在 JQuery 中使用切换但在单击外部 div 时需要关闭

问题描述

我正在使用 JQuery 并使用切换功能来滑动 ul li 元素。但我想要的是，如果有人在外部（页面上的任何地方）点击，如果它处于切换状态，则该 div 将被关闭。我在这里分享我的代码以便更好地理解......

$('#share-drop').click(function() {
  $('#share-drop ul').toggle(300);
});

$('header .header-top .left-nav .share ul li').click(function(e) {
  e.stopImmediatePropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share" id="share-drop">
  <img src="images/share-icon.png" alt="">
  <span>Share</span>
  <ul style="">
    <li><a href="javascript:void(0)"><i class="fab fa-facebook-f"> 
          </i>Facebook</a>
    </li>
    <li><a href="javascript:void(0)"><i class="fab fa-twitter"> 
          </i>Twitter</a>
    </li>
    <li><a href="javascript:void(0)"><i class="fab fa-google-plus-g"> 
          </i>Google Plus</a>
    </li>
    <li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"> 
          </i>LinkedIn</a>
    </li>
  </ul>
</div>

标签： javascriptjqueryhtmlcss

解决方案

您应该在窗口上进行单击事件以隐藏ul. 你可以这样做： 

$('#share-drop').click(function(event){
    event.stopPropagation();  // now it will not accept clicks from window 
    $('#share-drop ul').toggle(300);  
});

// to hide the ul on clicking outside the div when it is visible
$(window).on('click', function(){
    if($('#share-drop ul').is(':visible')) {
        $('#share-drop ul').hide(300);
    }
});


$('#share-drop').click(function(event){
    event.stopPropagation();
    $('#share-drop ul').toggle(300);  
});

// to hide the ul on clicking outside the div when it is visible
$(window).on('click', function(){
    if($('#share-drop ul').is(':visible')) {
        $('#share-drop ul').hide(300);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share" id="share-drop">
  <img src="images/share-icon.png" alt="">
  <span>Share</span>
  <ul style="">
    <li><a href="javascript:void(0)"><i class="fab fa-facebook-f"> 
          </i>Facebook</a>
    </li>
    <li><a href="javascript:void(0)"><i class="fab fa-twitter"> 
          </i>Twitter</a>
    </li>
    <li><a href="javascript:void(0)"><i class="fab fa-google-plus-g"> 
          </i>Google Plus</a>
    </li>
    <li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"> 
          </i>LinkedIn</a>
    </li>
  </ul>
</div>

推荐阅读