Question

当我点击按钮时，按钮切换特定的类并打开一些东西，这是有效的，但问题是，当我尝试键入一个代码，当我点击它之外将关闭该对象时，它不起作用

＆＃13;

$(function() {
  $('button').on('click', function() {
    $('.list').toggle();
    $('button').toggleClass('something');
  });
  $(document).on('click', function(e) {
    if (e.target !== 'list, button') {
      $('.list').hide();
    }
  });
});

＆＃13;

.list {
  width: 100px;
  height: 150px;
  background: lightgray;
  display: none;
}

button {
  background: green
}

.something {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='list'></div>
<button>button</button>

＆＃13;

Answer 1

那是因为你有display: none的CSS声明。您还可能希望向.list添加一些内容（因此可以将其隐藏），如以下示例中所示：

＆＃13;

$(function() {
  $(document).on('click', function(e) {
    if (e.target !== 'list, button') {
      $('.list').hide();
    }
  });
});

＆＃13;

.list {
  width: 100px;
  height: 150px;
  background: lightgray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='list'>List</div>

＆＃13;

希望这有帮助！：）

Answer 2

尝试此代码，在这里您将打开列表并移动它，但是当您点击按钮和列表外部时，列表将被隐藏：

var change ="y";

$('button').on('click', function() {
   if(change == "y") { $(".list").show(); }});

$('button').on('blur', function() {
    if(change == "x") { $(".list").hide();
    change="y";}});
  
      
$('.list').on('mouseover', function() { change="y";});
$('.list').on('mouseout', function() {change="x";
$('button').focus();});

.list {
  width: 100px;
  height: 150px;
  background: lightgray;
  display: none;
}

button {
  background: green
}

.something {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='list'></div>
<button>button</button>

点击外面时如何关闭元素？

2 个答案: