Question

我有使用本机Jquery切换的元素。使用内联脚本onclick="$('#elementname').toggle();return false"的按钮切换这些元素，这些按钮切换每个元素，所有这些都使用相同的jQuery的Toggle。当用户使用兼容的jQuery的Toggle代码点击这些div时，如何隐藏div？

Answer 1

您可以在#navmenu中使用onblur =“toggle（false）”，但只有在#navmenu是输入或textarea等表单元素时才能使用。

另一种方法是检测单击文档以隐藏#navmenu，并防止单击#navmenu。您还需要阻止在#navmenu和按钮上传播所有点击。麻烦的是，按钮onclick中的返回false不起作用，这意味着将触发文档单击。你需要有一些带有标志的逻辑来防止这种情况，但是更容易删除内联脚本，无论如何都是这样。然后你得到类似的东西：

https://jsfiddle.net/3Luo34m1/

<button></button>
<p id="navmenu">Testing 123</p>

$(document).on("click", function(e) {
  if (e.target.id == 'navmenu') return false; // prevent click on #navmenu
  $('#navmenu').toggle(false); // hide()
});
$('button').on("click", function() {
  $('#navmenu').toggle();
  return false;
});

顺便说一句，如果你有多个按钮和＃navmenu，你需要使用类而不是id。

Answer 2

试试这个：

$(document).click(function(event){
    if(event.target.classList.contains('.target-div') === false){
    $('.target-div').removeClass('remove toggled class');
    }
});

单击外部时隐藏切换的div（与本机jQuery的切换兼容）

2 个答案: