代码之家 › 专栏 › 技术社区 › Hparekh

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

submenu menu css html javascript

Hparekh · 技术社区 · 6 年前

我在我的页面顶部有一个菜单栏,当点击时会显示子菜单,我想在点击页面中的任何位置时使子菜单消失。到目前为止,我编写了代码,在单击菜单时显示子菜单。下面是相同的代码!

有人能帮我用现有的代码在点击页面中的任何地方时关闭子菜单部分吗?

非常感谢!

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');
    }
  });

});

#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;
}

<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>

1 回复 | 直到 6 年前

Pankaj Bhandarkar 6 年前

只需在javascript中添加以下小代码:

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

希望这对你有帮助。