Question

当<li>打开hovered时，我有一个<ul>。

我希望能够点击<li>并让<ul>打开和关闭，但仍保留悬停功能。一旦点击发生，我就失去了:hover。

CSS

ul#popup-menu {
    display: inline-block;
    margin: 0;
    cursor: pointer;
}
ul#popup-menu ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
}
ul#popup-menu li {
    list-style-type: none;
    position: relative;
}
ul#popup-menu li:hover > * {
    display: block;
}

HTML

<ul id="popup-menu">
    <li>
        Click to open
        <ul>
            <li>
                Item 1
            </li>
            <li>
                Item 2
            </li>
            <li>
                Item 2
            </li>
        </ul>
    </li>
</ul>

的JavaScript

$(document).ready(function() {
    $('#popup-menu').click(function() {
        var element = $('ul#popup-menu ul')
        if (element.css('display') === 'block') {
            $('ul#popup-menu ul').css('display', 'none');
        } else {
            $('ul#popup-menu ul').css('display', 'block');
        }
    });
});

Answer 1

添加重置样式属性的代码，因为内联样式具有ul#popup-menu li:hover > * css选择器的更高优先级。因此，设置样式时display-block始终为none;

试试这个：

$(document).ready(function() {
  $('#popup-menu').click(function() {
    if ($('ul#popup-menu ul').css('display') === 'block') {
      $('ul#popup-menu ul').css('display', 'none');
    } else {
      $('ul#popup-menu ul').css('display', 'block');
    }
  });

  $('#popup-menu > li').mouseleave(function() {
    $('ul', this).removeAttr('style');
  })
});

Fiddle

因此，当您对菜单标题进行鼠标移动时，它会嵌套UL并删除style属性，因此悬停可以再次使用

Answer 2

$(document).ready(function() {
 $('#popup-menu').click(function() {
if ($('ul#popup-menu li ul').css('display') === 'block') {
  $('ul#popup-menu li ul').css('display', 'none');
} else {
  $('ul#popup-menu li ul').css('display', 'block');
}
 });

 $("ul#popup-menu li").bind
 ({
  mouseover:
     function ()
     {
     $('ul#popup-menu li ul').css('display', 'block');
    },
  mouseout:
    function ()
    {
     $('ul#popup-menu li ul').css('display', 'none');
    }
  });

  });

Pen

Answer 3

只需与课程一起玩，并使用JS

进行

$(document).ready(function() {
  $('#popup-menu').hover(
    function() {
      $('ul#popup-menu ul.hover').css('display', 'block');
    },
    function() {
      $('ul#popup-menu ul.hover').css('display', 'none');
    }
  );
  $('#popup-menu').click(function() {
    if ($('ul#popup-menu ul').hasClass('active')) {
      $('ul#popup-menu ul').removeClass('active');
      $('ul#popup-menu ul').addClass('hover');
    } else {
      $('ul#popup-menu ul').removeClass('hover');
      $('ul#popup-menu ul').addClass('active');
    }
  });
});

ul#popup-menu {
  display: inline-block;
  margin: 0;
  cursor: pointer;
}

ul#popup-menu ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
}
ul#popup-menu ul.active {
  display:block;
}
ul#popup-menu li {
  list-style-type: none;
  position: relative;
}

/* ul#popup-menu li:hover > * {
  display: block;
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul id="popup-menu">
    <li>
      Open menu
      <ul class="hover">
        <li>
          Item
        </li>
        <li>
          Item
        </li>
        <li>
          Item
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 4

试试这个，这样即使点击后也能保持悬停效果。如果您从CSS中删除：hover ，这甚至可以使用。

$(document).ready(function() {
  $('#popup-menu').click(function(){
  $("ul li > ul").show();
  $(this).mouseout(function(){
  $("ul li > ul").hide();
  });
   });
});

CSS：菜单在悬停时打开，在单击时关闭

4 个答案: