jQuery:不使用选择器单击

以下代码旨在删除" on"类别。从li元素中，属于"左派"one_answers"搜索栏"当单击#target以外的任何元素但没有效果时：

$(':not(#target)').click(function() {
  $('li.searchbar.left').removeClass("on");
});

这是HTML，基本上，如果用户单击任何地方，则除了#target以外的任何地方，它将从Li.

中删除上课

<body>
  <header></header>
  <div class="one"></div>
  <div class="two"><a id="target"></a></div>
  <ul>
    <li class="searchbar left on"></li>
  </ul>
  <footer></footer>
</body>

// if click anywhere on <body> remove class on from given li
$(document).on("click", function() {
    $('li.searchbar.left').removeClass("on");
});
// if click happens on #target do nothing
$('#target').on('click', function(e) {
    e.stopPropagation();
});

body {
  background-color: green;
}
#target {
background-color: powderblue;
width: 100px; height: 100px;
}
li.searchbar.left.on {
  color: orange;
}
li.searchbar.left {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="searchbar left on">hello</li>
</ul>
<div id="target">#target</div>

对于非选择器，您已将其应用于类似的元素组。

例如，从"选择"的Li列表中，但单击没有"选择"类：

$('.left:not(#target)').click(function() {
console.log("clicked");
});

$("body").click(function(ev) {
if(ev.target.id == "target") {
return false;
} else {
// your code
}
})

相关内容

最新更新

热门标签：