Question

我知道这个话题已经讨论过，但每个问题在某些方面都是独一无二的。我尝试了其他修复和示例，了解如何在单击外部时关闭子菜单，但没有成功。

如何制作uslugi＆gt;单击框外的block_menu关闭？（不切换链接）

目前，点击时会打开导航项，单击时会关闭导航项。参见CodePen - ＆gt; http://codepen.io/anon/pen/RNweVa

谢谢！

HTML

<li class="uslugi"><a href="#">УСЛУГИ</a>
                <div class="block_menu">
                <ul class="pod_nav1">
                    <li><a href="#">SEO Pakalpojumi</a></li>
                </ul>
                <ul class="pod_nav2">
                    <li><a href="#">SEO Pakalpojumi</a></li>
                </ul>
                <ul class="pod_nav3">
                    <li><a href="#">SEO Pakalpojumi</a></li>
                </ul>
                <ul class="pod_nav4">
                    <li><a href="#">SEO Pakalpojumi</a></li>
                </ul>
                </div>
            </li>

我试过这个：一个）

window.addEventListener ("mouseup", function(event) {
var box = document.getElementByClassName ("uslugi");
if (event.target != box && event.target.parentNode != box) {
 box.style.display = "none";
}
});

b）中

 $(".uslugi").click(function () {
 $(this).children().children().toggle();
 });
 $(".uslugi").click(function(){ 
  $(this).fadeIn(300,function(){$(this).focus();});
 });
 $(".uslugi").on('blur',function(){
$(this).fadeOut(300);
});

Answer 1

将事件处理程序添加到html元素（适用于所有子元素）HTML：

<html onclick="hidePopupMenus(event);">

使html元素占据整个页面。 CSS：

html
   {
    height:100%;
   }

显然，你有一个按钮或某个东西可以打开对话框（如果不是这种情况，只需对我的脚本进行一些小改动）。当函数被触发时，它将确保event.target.id不等于打开对话框的按钮。如果不是它继续隐藏你想隐藏的任何东西。 如果您没有按钮打开此元素，只需删除if语句。 javascript：

function hidePopupMenus(event)
{
    if(event.target.id != 'whateverOpensMyPopup')
    {
        document.getElementById('popUpThingy').style.display = 'none';
    }
}

Answer 2

使用下拉列表切换的基础知识：

1）使用CSS根据存在的类显示和隐藏您的下拉列表

.uslugi .block_menu {
  display: none;
}

.uslugi.open .block_menu {
  display: block;
}

2）当用户点击正文中的任意位置时，请关闭所有下拉列表

$(body).on("click", function() {
  $(".uslugi").removeClass("open");
});

3）单击切换器或在下拉列表中停止触发该事件：

$(".uslugi").on("click", function(e) {
    e.stopPropagation();
});

4）在切换器上设置一个事件来切换类：

// You should set a class to fix this poor selector
$(".uslugi").children("a").on("click", function() {
  $(".uslugi").toggleClass("open");
});

Answer 3

最简单的方法是这样做：

$(".uslugi>a").click(function (e) {
    e.preventDefault();
    $(this).siblings().children().toggle();
    $(this).focus();
}).blur(function () {
    $(this).siblings().children().hide();
});

单击链接外部将触发blur事件。 Codepen example。请注意，必须focus锚定，因为webkit浏览器和IE不关注它。

JavaScript关闭点击外面

3 个答案: