javascript - 单击时显示元素而不是 CSS :hover

Question

目前，我在 CSS 中使用 :hover 来显示 .wrapper1 元素中的嵌套列表。我想让它们在点击时打开，而不是在悬停时打开。

这是我迄今为止尝试过的:

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('click', function() {
    var $menuItem = $(this),
        $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
    });
  });
});

演示:https://jsfiddle.net/72tnxh45/2/

下面是可以影响显示所有子链接的CSS。

.wrapper1 li:hover > .wrapper1 {
  display: block;
}

Answer 1

$(document).ready(function(){ 

    $(".wrapper ul li").click(function(){
       //do what ever you want to do with li
    });
});