Question

我的页面顶部有一个菜单栏，点击时会显示子菜单，我想点击页面中任意位置的子菜单消失。到目前为止，我做了代码，点击我的菜单显示子菜单。下面是相同的代码！

有人可以帮助我使用现有代码点击页面中任意位置关闭子菜单部分吗？

非常感谢提前！

＆＃13;

var ddmenuitem = 0;

function jsddm_open() {
  jsddm_close();
  ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
  $(this).find('ul.submenu').css('transition', '1s');
  //$(this).find('div.divsubsubmenu').css('display','none');
}

function jsddm_close() {
  if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
  $('#topnav > ul > li').bind('click', jsddm_open);
  $('#topnav > ul > li > a').click(function(ev) {
    if ($(this).hasClass('current')) {
      ev.preventDefault();

    }

    if ($(this).attr('class') != 'active') {
      $('#topnav ul li a').removeClass('active');
      $(this).addClass('active');
    }
  });

});

＆＃13;

#topnav {
  width: 800px;
  height: 30px;
  background-color: #191919;
  margin-top: 10px;
  position: relative;
  font-size: 12px;
  font-family: Verdana;
  margin: auto;
  text-align: center;
}

#topnav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#topnav ul li {
  float: left;
  margin: 0;
  padding: 0;
}

#topnav ul li a.MenuLink {
  padding: 5px 15px;
  color: red;
  text-decoration: none;
  display: block;
  font-weight: bold;
  border: double #161718;
  border-width: 1.3px;
  border-top: none;
  border-bottom: none;
}

#topnav ul li a:link {
  color: red;
  text-decoration: none;
}

#topnav ul li a:visited {
  color: #FFF;
  text-decoration: none;
}

#topnav ul li a:hover {
  background-color: black;
  text-decoration: none;
  transition: 0.3s;
}

#topnav ul li a.active {
  text-decoration: none;
  color: black;
  background: #e0e0e0;
  font-size: 15px;
  font-weight: bold;
}

#topnav ul li ul.submenu {
  float: left;
  padding: 4px 0;
  position: absolute;
  left: 0;
  top: 30px;
  display: none;
  background: #e0e0e0;
  width: 800px;
  height: 30px;
}

#topnav ul li ul.submenu a {
  display: block;
  color: #00537F;
  font-weight: bold;
  padding: 4px 8px;
}

#topnav ul.submenu>li:hover>a {
  background-color: black;
  color: white;
}

#topnav ul div {
  visibility: hidden;
}

#topnav li:hover ul div.divsubsubmenu {
  visibility: hidden;
}

#topnav li li:hover div.divsubsubmenu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

#topnav div.divsubsubmenu {
  height: 50px;
  background: black;
  color: white;
  float: left;
  left: 0;
  width: 800px;
  position: absolute;
}

#topnav div.divsubsubmenu>ul>li:hover>a {
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div id="topnav">
    <ul>
      <li>
        <a class="MenuLink" href="#">Admin</a>
      </li>
      <li>
        <a class="MenuLink" href="#"> MAC </a>
        <ul class="submenu">
          <li><a href="#">Master Data</a></li>
          <li>
            <a href="#">Transaction Data</a>
            <div class="divsubsubmenu">
              <ul>
                <li><a href="#">Company Master</a></li>
                <li><a href="#">Location Master</a></li>
                <li><a href="#">Size Master</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#">Admin Data</a>
          </li>
        </ul>
      </li>
      <li>
        <a class="MenuLink" href="#">TPC  </a>
        <ul class="submenu">
          <li><a href="#">TPC1</a></li>
          <li><a href="#">TPC2</a></li>
      </li>
      </ul>
  </div>
</body>

＆＃13;

Answer 1

只需在您的javascript中添加以下小代码：

$("body").on('click', function(e){
    var element = e.target.tagName;
    if(element !== 'A') {
        $("#topnav ul li ul.submenu").css('display', 'none');
    }
  });

希望这可以帮助你。

关闭子菜单下拉列表，单击页面中的任意位置

1 个答案: