即使鼠标悬停丢失，下拉菜单仍然可见

Question

我需要有带有下拉菜单项的主菜单。因此，当用户悬停菜单项时，会显示下拉菜单。这已经由 CSS 和 :hover 选择器完成。 但是，通常当 :hover 丢失（鼠标移到菜单项元素之外）时，相应的下拉菜单也会消失。但我需要的 - 菜单仍然可见，只有在点击时才会消失。

这里有一个例子：http://theemon.com/f/forever/Livepreview/agency-wedding/index.html

但是我不明白是哪个 CSS 或 JS 产生了这种效果，所以我不能在这里添加 snipper（如果可以，我不会问）。 在这个特定的示例中，当您悬停菜单项“页面”时，会出现下拉菜单，但在 :hover 丢失时它不会消失。它留在那里。我找不到，是什么造成了这种效果 - 是一些 JS 还是 CSS？

HTML：

 <ul class="navigation clearfix">   
        <li class="active">
            <a href="#">HOME</a>
        </li>

        <li>
            <a href="#">pages</a>
            <ul class="drop-down">
                <li>
                    <a href="event.html">Event</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="blog-detail-page.html">Blog-Detail</a>
                </li>
                <li>
                    <a href="travel-info.html">Travel-Info</a>
                </li>
                <li>
                    <a href="404-page.html">404</a>
                </li>
            </ul>
        </li>
    </ul>

一些 CSS：

 .clearfix {
     display: block;
  }
  ul {
      list-style-type: none;
  }
  ul, ol {
     font-size: 100%;
     line-height: 1.5;
     list-style: none;
  } 
 .navigation > li {
    padding: 16px 0px 36px 26px;
    float: left;
    position: relative;
    line-height: 1.5em;
}
.navigation > li:hover .drop-down {
    top: 76px;
    left: auto;
    left: 16px;
    right: 0;
}
.drop-down {
    position: absolute;
    top: 100px;
    width: 160px;
    z-index: 999;
    left: -9999px;
    opacity: 0;
    transition: top .2s ease, opacity .2s ease;
}   

Answer 1

您可以将mouseenter 上的.open 之类的类添加到包含下拉列表的li 元素中。

然后这样做：

var dropdown = $(".is-dropdown");

dropdown
  .on("mouseenter", function() {
    $(this)
      .addClass("open");
  })
  .on("click", function() {
    $(this).removeClass("open");
  }); 

---

jsFiddle

---

代码片段：

var dropdown = $(".is-dropdown");

dropdown
  .on("mouseenter", function() {
    $(this)
      .addClass("open");
  })
  .on("click", function() {
    $(this).removeClass("open");
  });

.clearfix {
  display: block;
}
ul {
  list-style-type: none;
}
ul,
ol {
  font-size: 100%;
  line-height: 1.5;
  list-style: none;
}
.navigation > li {
  padding: 16px 0px 36px 26px;
  float: left;
  position: relative;
  line-height: 1.5em;
}
.drop-down {
  position: absolute;
  top: 100px;
  width: 160px;
  z-index: 999;
  left: -9999px;
  opacity: 0;
  transition: top .2s ease, opacity .2s ease;
}
.navigation > .open .drop-down {
  top: 76px;
  left: auto;
  left: 16px;
  right: 0;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
  <li class="active">
    <a href="#">HOME</a>
  </li>

  <li class="is-dropdown">
    <a href="#">pages</a>
    <ul class="drop-down">
      <li>
        <a href="event.html">Event</a>
      </li>
      <li>
        <a href="blog.html">Blog</a>
      </li>
      <li>
        <a href="blog-detail-page.html">Blog-Detail</a>
      </li>
      <li>
        <a href="travel-info.html">Travel-Info</a>
      </li>
      <li>
        <a href="404-page.html">404</a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

我确信此功能还有其他参数，但这里有一个适合您的基本解决方案。

$(document).ready(function() {
  $('.drop-down').slideUp(0); //hides all your drop downs  


  $('.navigation li:has(> ul.drop-down)').on('mouseenter', function() {
    $(this).children('ul').slideDown();
  });


  $('.closeEm').on('click', function(e) {
    e.preventDefault(); // this stops the page jumpping on click
    $('ul.drop-down').slideUp();
  });


});

.clearfix {
  display: block;
}
ul {
  list-style-type: none;
}
ul,
ol {
  font-size: 100%;
  line-height: 1.5;
  list-style: none;
}
.navigation > li {
  padding: 16px 0px 36px 26px;
  float: left;
  position: relative;
  line-height: 1.5em;
}
.navigation li {
  background-color: #ddd;
}
.drop-down {
  position: absolute;
  top: 70px;
  width: 160px;
  z-index: 999;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
  <li class="active">
    <a href="#">HOME</a>
  </li>

  <li>
    <a href="#">pages</a>
    <ul class="drop-down">
      <li>
        <a href="event.html">Event</a>
      </li>
      <li>
        <a href="blog.html">Blog</a>
      </li>
      <li>
        <a href="blog-detail-page.html">Blog-Detail</a>
      </li>
      <li>
        <a href="travel-info.html">Travel-Info</a>
      </li>
      <li>
        <a href="404-page.html">404</a>
      </li>
    </ul>
  </li>


  <li>
    <a href="#">pages</a>

  </li>


  <li>
    <a href="#">pages</a>

  </li>


  <li>
    <a href="#">pages</a>

    <li>
      <a href="#" class="closeEm">Close Dropdowns</a>
    </li>
</ul>

Answer 3

我不确定我是否理解您要执行的操作，但我想这个示例将是您所需要的： http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover