Question

尝试在元素点击时显示菜单，我确实可以看到菜单，但只要按下鼠标就可以了..

HTML：

<i class="fa fa-sort">
    <div class="popupMenu">
      <ul>
        <li">menu item 1</li>
        <li>menu item 2</li>
       </ul>
    </div>
</i>

的CSS：

div.popupMenu {
    position: absolute;
    display:none;
    z-index: 1000000;
    color:black;
    background-color: white;
    width: 100px;
    padding: 0px !important;
}
.fa-sort  {
    cursor:pointer;
    width: 5px;
}
.fa-sort:hover div.popupMenu {
    display:block;
}

我想要的是点击元素和菜单以保持可见。我尝试了:focus方法，但没有成功..有没有办法在不使用JavaScript的情况下完成？

欢迎任何帮助！

Answer 1

这可以通过使用JavaScript来实现。首先，删除悬停效果的CSS，然后;

更改HTML并指定一些ID

<i id="menu-toggle" class="fa fa-sort">
    <div id="menu" class="popupMenu">
      <ul>
        <li">menu item 1</li>
        <li>menu item 2</li>
       </ul>
    </div>
</i>

JS：

document.getElementById('menu-toggle').addEventListener("mouseover", function(){
    document.getElementById('menu').style.display = 'block';
});

document.getElementById('menu-toggle').addEventListener("mouseout", function(){
    document.getElementById('menu').style.display = 'none';
});

这在jQuery中更容易。

Answer 2

如果你真的想使用没有javascript的菜单。请试试这个。你可以得到一个想法。整个代码如下;您需要单击小红框。

div.popupMenu {
    position: absolute;
    display:none;
    z-index: 1000000;
    color:black;
    background-color: white;
    width: 100px;
    padding: 0px !important;
}
.fa-sort  {
    cursor:pointer;
    width: 5px;
    display: block;
    border:1px solid red;
}

.hiddencheckbox{display:none}

.hiddencheckbox:checked+label .fa-sort .popupMenu
 {
  display: block !important;
}

<input type="checkbox" class="hiddencheckbox" id="hiddencheckbox">

<label for="hiddencheckbox">
<i class="fa fa-sort">
    <div class="popupMenu">
      <ul>
        <li>menu item 1</li>
        <li>menu item 2</li>
       </ul>
    </div>
</i>
  </label>

css：活动停留元素可见

2 个答案: