Question

我正在使用JQuery并使用切换功能来滑动ul li元素。但是我想要的是，如果有人在外部（页面上的任意位置）单击，则div处于Down状态时将被关闭。我在这里共享我的代码以更好地了解...

$('#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>

Answer 1

您应该在窗口上单击事件以隐藏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>

Answer 2

您可以以仅触发一次的方式绑定事件。您可以在共享放置事件处理程序中执行此操作，这样除非共享放置打开，否则事件不会触发。

$("#share-drop").click(function(e) {
  e.stopImmediatePropagation();
  var $shareDrop = $("#share-drop ul")
  $shareDrop.toggle(300);
  $("window").one(function() {
    $shareDrop.hide(300);
  });
});
$("header .header-top .left-nav .share ul li").click(function(e) {
  e.stopImmediatePropagation();
});

在JQuery中使用切换功能，但在div外部单击时需要关闭

2 个答案: