代码之家 › 专栏 › 技术社区 › Potato

切换后无法单击按钮

css html jquery javascript

Potato · 技术社区 · 7 年前

var $menu = $('.menu');

$('.toggle').click(function () {
  $menu.toggle();
});

$(document).mouseup(function (e) {
   if (!$menu.is(e.target) // if the target of the click isn't the container...
   && $menu.has(e.target).length === 0) // ... nor a descendant of the container
   {
     $menu.hide();
  }
 });

请帮帮我。

3 回复 | 直到 7 年前

Sumesh TG 7 年前

$(document).ready(function(){
  var $menu = $('.menu');

$('.toggle').click(function (e) {
e.stopPropagation();
  $menu.toggle();
});
$('.container').click(function (e) {
e.stopPropagation();
  $menu.toggle();
});
});

.dropdown {
  margin: 200px auto;
  position: relative;
  width: 50%;
}

.toggle, .dropdown-menu {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="text-center col-xs-12">
      <h1>jQuery: click outside to close menu</h1>
      <p>Click the button to toggle the dropodown menu.</p>
      <p>Then click outside dropdown menu to close.</p>
      <div class="dropdown">
  <a href="#" title="" class="btn btn-default toggle">Toggle menu</a>
  <ul class="dropdown-menu menu">
    <li class="dropdown-item">List item 1</li>
    <li class="dropdown-item">List item 2</li>
    <li class="dropdown-item">List item 3</li>
</div>  
    </div>
    </div>
  </div>

使用 event.stopPropagation(); 这不会阻止同一元素上的其他处理程序运行。

Alexander N. Morgunov 7 年前

简单地说,你只需要一个鼠标点击动作。你的JS必须是:

var $menu = $('.menu');
var $toggle = $('.toggle');

$(document).mouseup(function (e) {
  if ($toggle.is(e.target)) {
    $menu.toggle()
  } else {
    $menu.hide();
  }
});

Devansh 7 年前

var $menu = $('.menu');

$('.toggle').click(function () {
  $menu.toggle();
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前