Question

<li class="dropdown-grid open">
  <a class="dropdown-toggle" id="ddaccount" aria-expanded="false">
    <i class="fa fa-lock"></i>&nbsp;<span class="hidden-sm hidden-md hidden-lg">User Account</span><span class="caret"></span>
  </a>
  <div role="menu" class="dropdown-grid-wrapper">
    <ul class="dropdown-menu col-xs-12 col-sm-10 col-md-8 col-lg-7">
      <li>
        <div data-ride-class="carousel slide" id="carousel-example-account">
          <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8">
              <div class="carousel-inner">
                <div class="item active">
                  <h3 class="text-right"><i class="fa fa-lock"></i>&nbsp;Login</h3><br>

                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</li>

在上面的代码中我有一个ul元素，当我点击按钮它需要添加开放类到li元素，这是正常工作...但问题是，我想在jQuery中的另一个功能，当用户点击里面那个打开它不会关闭的div ......但是如果用户点击那个div之外只关闭那个div ...

当我点击添加课程开放的按钮时工作：

$("li").on("click","a.dropdown-toggle",function(e){
    $('li.dropdown-grid').toggleClass("open");
    e.stopPropagation();
  });

不工作......当用户在打开的div内部点击它不需要关闭...当用户点击外面打开div时，它需要关闭该div（删除类打开）

$(document).on("click", function(e) {
    if ($(e.currentTarget).is("a.dropdown-toggle") === false) {
      $('li.dropdown-grid').removeClass("open");
      console.log("close menu clicked outside ul...");
    }
  });

我不知道为什么它在open div里面关闭（在div点击关闭之外，那很好）但是如果我点击那个div里面它也关闭了，当我点击那个div时我不需要关闭...我在上面的代码中做错了什么？

Answer 1

我添加了这个，现在正在工作..这不是优雅和干净的方式（长度=== 0），但如果有人知道更优雅的方式工作，请发布...这对我有用...

$(document).on("click", function(e) {
    if ($(e.target).closest('li.dropdown-grid').length === 0) {
      $('li.dropdown-grid').removeClass("open");
    }
  });

jQuery关闭div，如果在div外面点击

1 个答案: