Question

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

此效果的一个示例如下：http://theemon.com/f/forever/Livepreview/agency-wedding/index.html

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

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

然后这样做：

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

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

<强> jsFiddle

CODE SNIPPET

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: