在悬停和单击时创建下拉导航

Question

我有一个使用 CSS 和 jQuery 创建的下拉菜单，我试图在 悬停时 和 点击时 上创建下拉菜单。

默认情况下，我希望下拉菜单在点击时显示，但考虑到 .dropdown-hover 类，我希望它在悬停时显示。

这是我目前拥有的 JSFiddle：http://jsfiddle.net/dR8hL/1/

现在，无论对下拉菜单应用什么类，它都会在悬停时显示，我不确定如何解决这个问题。

HTML

<div class="dropdown dropdown-hover">Dropdown on hover                
    <ul class="dropdown-menu">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Log out</a></li>
    </ul>
</div>

<div class="dropdown">Dropdown on click                
    <ul class="dropdown-menu">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Log out</a></li>
    </ul>
</div>

CSS

.dropdown {
    cursor: pointer;
    outline: none;
    position: relative;
    width: auto;
}

.dropdown .dropdown-menu {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: inherit;
    font-weight: inherit;
    left: 0;
    margin-left: 0px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-transform: none;
    width: 200px;
    z-index: 99999;

    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.dropdown .dropdown-menu a { text-decoration: none; }

.dropdown .dropdown-menu p { 
    margin: 0; 
    padding: 10px 15px; 
}

.dropdown .dropdown-menu span { line-height: inherit; }

.dropdown ul.dropdown-menu { list-style-type: none; }

.dropdown .dropdown-menu li {
    display: block;
    padding: 5px 10px;
}

.dropdown .dropdown-menu li:hover { background-color: #f3f8f8; }

.dropdown.dropdown-active .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

jQuery

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}

DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        // Determine if dropdown is on hover or on click
        if ($(".dropdown").hasClass("dropdown-hover")) {
            // Toggle .dropdown-active on hover
            $(".dropdown").mouseenter(function (event) {
                $(this).addClass("dropdown-active");
                event.stopPropagation();
            });

            $(".dropdown-menu").mouseleave(function () {
                $(".dropdown").removeClass("dropdown-active");
            });
        } else {
            // Toggle .dropdown-active on click
            obj.dd.on('click', function (event) {
                $(this).toggleClass('dropdown-active');
                event.stopPropagation();
            });
        }
    }
}

$(function () {
    var dd = new DropDown($('.dropdown'));

    $(document).click(function () {

        // Remove class from all dropdowns
        $('.dropdown').removeClass('dropdown-active');
    });
});

Answer 1

你能不能只针对 .dropdown-hover 类。你不应该需要 if 语句

        $(".dropdown-hover").mouseenter(function (event) {
            event.stopPropagation();
            $(this).addClass("dropdown-active");                
        });
        $(".dropdown-hover").mouseleave(function () {
            $(".dropdown").removeClass("dropdown-active");
        });

        // Toggle .dropdown-active on click
        obj.dd.on('click', function (event) {
            event.stopPropagation();
            $(this).toggleClass('dropdown-active');                
        });

更新了 JSFiddle http://jsfiddle.net/47mSS/

Answer 2

你可以通过简单的 CSS 和一点点 JS 来实现这个 -

工作演示 - http://codepen.io/nitishdhar/pen/rpqct

要使用的 HTML 片段

<ul class="drop">
  <li>Dropdown on Hover
    <ul>
      <li>Profile</li>
      <li>Settings</li>
      <li>Log out</li>
    </ul>
  </li>
</ul>

<ul class="drop-on-click">
  <li>Dropdown on Click
    <ul>
      <li>Profile</li>
      <li>Settings</li>
      <li>Log out</li>
    </ul>
  </li>
</ul>

您需要将“drop”类分配给应在悬停时打开的菜单。此外，只需将“drop-on-click”类分配给您要在点击时打开的类。

重要的 CSS

ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
}
ul.drop li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

演示链接中有更多 CSS，但主要处理 UI 方面。

现在处理点击场景的 JS -

$(document).ready(function() {
   $('.drop-on-click').click(function(){
     $(this).toggleClass('drop');
   });

   $('.drop-on-click ul li').hover(
     function() {
        $('.drop-on-click').addClass('drop');
      }, function() {
        $('.drop-on-click').removeClass('drop');
      }
    );
});

所以基本上 JS 正在添加已经处理的类“drop”，它将根据书面 CSS 为菜单提供下拉属性。现在当我们在下拉菜单上移动时，我们需要保留 drop 类，直到我们超过 li 元素，一旦我们移出，我们就删除了这个类。