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

I need to have main menu with dropdown menu items. So, when user hovers menu item then dropdown menu is shown. This is already done by CSS and :hover selector. However, usually when :hover is lost (mouse is moved outside menu item element) then appropriate dropodown also disappears. But what I need - menu is still seen and disappears only on click.

我需要有主菜单和下拉菜单项。因此,当用户悬停菜单项时,会显示下拉菜单。这已经由CSS和:hover选择器完成。但是,通常在以下情况下:鼠标悬停(鼠标移动到菜单项元素外),然后适当的dropodown也会消失。但我需要的是 - 菜单仍然可见,只有点击才会消失。

One example of this effect is here: http://theemon.com/f/forever/Livepreview/agency-wedding/index.html

这种效果的一个例子是:http://theemon.com/f/forever/Livepreview/agency-wedding/index.html

However I do not understand which CSS or JS creates this effect, so I cannot add snipper here (if I could, I would not ask). In this particular example, when you hover menu item "Pages", dropdown menu appears, but it doesn't disappear when :hover is lost. It stays there. I am not able to find, what makes this effect - is it some JS or CSS?

但是我不明白哪个CSS或JS创建了这个效果,所以我不能在这里添加snipper(如果可以的话,我不会问)。在此特定示例中,当您悬停菜单项“页面”时,会出现下拉菜单,但在下列情况下它不会消失:悬停丢失。它留在那里。我无法找到,是什么造成这种影响 - 是一些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>

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

3 个解决方案

#1

You can add a class like .open on mouseenter to your li element which contains a dropdown.

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

Then do this:

然后这样做:

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

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

jsFiddle

CODE SNIPPET:

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>

#2

I am sure there are other parameters to this functionality, but here is a base level solution for you.

我确信此功能还有其他参数,但这里有一个基本级别的解决方案。

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

#3

I'm not sure if i understand what you are trying to do, but i guess that this example will be what you need: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

我不确定我是否理解你想要做什么,但我想这个例子将是你需要的:http://www.w3schools.com/howto/tryit.asp?filename =tryhow_css_js_dropdown_hover

#1