在点击而不是 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
    });
});

Answer 2

请看附件sn-p。

jqyery代码和css也做了一些改动。

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('click', function() {
       if($(this).children(".wrapper").attr('style')=='display: block;'){
          $(this).children(".wrapper").css('display','none');

    }else{
                  $(this).children(".wrapper").css('display','block');

      }
     
   });
  
  
});

.wrapper {
  position: relative;
}

ul {
  width: 200px;
  max-height: 250px;
  overflow-x: hidden;
  overflow-y: auto;
}

li {
  position: static;
}
li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}
li:hover > .wrapper {
  //display: block;
  
}

li:

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}
li ul {
  margin: 0;
}
li .wrapper {
  cursor: auto;
}
li .wrapper li {
  padding: 0.5em;
}
li:nth-child(2n) {
  background: #0E8CE0;
}
li:nth-child(2n+1) {
  background: #0064B3;
}
li.parent {
  background: #00B99B;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   

    
    
    
  

    <div class="wrapper">
  <ul>
    <li>Abc</li>
    <li>Def</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li class="parent">Mno >
      <div class="wrapper">
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
          <li class="parent">Mno >
            <div class="wrapper">
              <ul>
                <li>Abc</li>
                <li>Def</li>
                <li>Ghi</li>
                <li>Jkl</li>
                <li>Mno</li>
                <li>Pqr</li>
                <li>Stu</li>
                <li>Vw</li>
                <li>Xyz</li>
              </ul>
            </div>
          </li>
          <li>Pqr</li>
          <li>Stu</li>
          <li>Vw</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Pqr</li>
    <li>Stu</li>
    <li>Vw</li>
    <li>Xyz</li>
    <li class="parent">Abc >
      <div class="wrapper">
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
          <li>Mno</li>
          <li>Pqr</li>
          <li>Stu</li>
          <li>Vw</li>
          <li>Xyz</li>
        </ul>
      </div>
    </li>
    <li>Def</li>
    <li>Ghi</li>
    <li>Jkl</li>
    <li>Mno</li>
    <li>Pqr</li>
    <li>Stu</li>
    <li>Vw</li>
    <li>Xyz</li>
  </ul>
</div>