Question

HTML：

<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>

jQuery：

$("header .menu-icon").click(function() {
  $(".menu-drop").slideToggle();
});

CSS：

.menu-drop {
  display: none;
}

我想在.menu-drop和.menu-icon之外单击然后.menu-drop div隐藏单击菜单下拉div时，它不会隐藏。

Answer 1

将namespaces="ns1 ns2" deployments="dep1 dep2" for ns in ${namespaces}; do for dep in ${deployments}; do kubectl rollout restart deployment/"${dep}" --namespace="${ns}" done done与mouseup一起使用，如下所示。

document

const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
  if (!$menu.is(e.target) &&
    $menu.has(e.target).length === 0) {
    $(".menu-drop").hide();
  }
});

$('.menu-icon').on('click', () => {
  $(".menu-drop").slideToggle();
});

.menu-drop {
  display: none;
}

Answer 2

单击文档时，如果菜单中没有元素<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu-right"> <img class="menu-icon" src="images/menu-icon.jpg" alt="menu"> <div class="menu-drop"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a></li> </ul> </div> </div>，则可以检查所单击元素是否具有特定的类。您还必须防止在单击菜单时传播事件。

slideUp()

$(".menu-icon").click(function(e) {
  e.stopPropagation();
  $(".menu-drop").slideToggle();
});

$(document).click(function(e) {
  if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
    $(".menu-drop").slideUp();
  }
});

.menu-drop {
  display: none;
}

Answer 3

这里有一些修改

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>

$(".menu-icon").click(function(e) { 
  $(".menu-drop").slideDown();
});

$(document).on('click', function (e) {
  if(!$(e.target).hasClass('menu-icon'))
    $(".menu-drop").slideUp();
});

.menu-drop {
  display: none;
}

Answer 4

在主体上使用单个事件侦听器。查询事件目标，并根据需要显示和隐藏菜单。

$(document).ready(function() {
  /*Add event listener to document*/
  $(document).click(function(event) {
    //If the target is the icon, toggle the menu
    console.log(event.target);
    console.log($(event.target).closest(".menu-drop").length)
    if(event.target.matches(".menu-icon"))
    {
      $(".menu-drop").slideToggle();
    }
    //Otherwise if outside the menu, slide up
    else if($(event.target).closest(".menu-drop").length === 0 )
    {
      $(".menu-drop").slideUp();
    }
  });
});

.menu-drop {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>

单击外部div和图标，div隐藏

4 个答案: