javascript - 在div外部单击以关闭div

当我在尝试事件的div之外单击时，我想关闭login-content div，但它不起作用

我有这个HTML代码

 <nav class="login">
  <ul>
     <li id="login">
    <a id="login-trigger" href="#">
      Log in <span>▼</span>
      </a>
     <div id="login-content">
    <form>
      <fieldset id="inputs">
        <input id="username" type="text" name="uname"
          placeholder="University ID" required>
        <input id="password" type="password" name="Password"
              placeholder="Password" required>
      </fieldset>
      <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <label><input type="checkbox" checked="checked"> Keep me signed
          in</label>
      </fieldset>
    </form>
    </div>
  </li>
</ul>

该js文件script.js

$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');

  if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
    else $(this).find('span').html('&#x25BC;')
   })
 });

最佳答案

您的html代码很好，需要更改js，

 $(document).ready(function(){
    $('#login-trigger').click(function(event){
        event.stopPropagation();
         $("#login-content").slideToggle();
    });
    $("#login-content").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".showup").hide();
});

工作小提琴链接在这里，

http://jsfiddle.net/evGd6/2/

关于javascript - 在div外部单击以关闭div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45833125/