Question

我正在设计一个侧边栏，它隐藏菜单条目，除非用户将鼠标悬停在移动设备上或点击它。问题出现在移动设备上（或者当我在Chrome中使用移动模式测试我的代码时，在开发人员选项中切换）。在触摸模式下，如果我点击侧边栏，焦点后将显示菜单条目，则会自动点击新显示的菜单条目。有没有办法禁用自动点击指针下新显示的链接？

我首选的解决方案是纯CSS - 但如果没有其他选项，我可以使用vanilla JS。

这是我的小提琴：https://jsfiddle.net/n7nsdL49/

HTML：

<div class="sidebar">
    <div class="menu">
        <ul class="menu">
            <li><a href="http://www.google.com" target="_blank">This</a></li>
            <li><a href="http://www.google.com" target="_blank">is</a></li>
            <li><a href="http://www.google.com" target="_blank">a</a></li>
            <li><a href="http://www.google.com" target="_blank">menu.</a></li>
        </ul>
    </div>
</div>

CSS：

.sidebar {
  position: fixed;
  height: 100%;
  width: 10%;
  background-color : green;
}
.menu {
  display: none
}
.sidebar:hover, .sidebar:focus {
  width: 20%;
  background-color: red;
}
.sidebar:hover .menu, .sidebar:focus .menu {
  display: block;
}

编辑：我尝试使用pointer-events选项，但它似乎对显示时自动点击的链接没有影响。

Answer 1

我的建议是避免使用显示器，而是使用以下方法将其隐藏在左侧：

.sidebar {
  position: fixed;
  height: 100%;
  width: 40%;
  background-color : green;
  left:-20%;
}

.sidebar:hover, .sidebar:focus {
  background-color: red;
  left:0;
}

这是一个小提琴：https://jsfiddle.net/n7nsdL49/2/

您甚至可以添加转换

.sidebar {
  position: fixed;
  height: 100%;
  width: 40%;
  background-color : green;
  left:-20%;
  transition: left 0.2s ease-in;
}

Answer 2

我可以使用animation属性自动点击新显示的链接。从本质上讲，我会在menu或focus获得hover课程的动画，以便在获得<div class="sidebar"> <div class="menu"> <ul class="menu"> <li><a href="http://www.google.com" target="_blank">This</a></li> <li><a href="http://www.google.com" target="_blank">is</a></li> <li><a href="http://www.google.com" target="_blank">a</a></li> <li><a href="http://www.google.com" target="_blank">menu.</a></li> </ul> </div> </div>或.sidebar { position: fixed; height: 100%; width: 10%; background-color : green; } .menu { display: none; visibility: hidden; /* <= include this property */ } .sidebar:hover, .sidebar:focus { width: 20%; background-color: red; } /* ================== */ /* THE IMPORTANT PART */ /* ================== */ .sidebar:hover .menu, .sidebar:focus .menu { display: block; /* make it part of the DOM */ animation: fadeIn 0.05s; /* make it visible after a while */ animation-fill-mode: forwards; /* make it retain final visibility */ } @keyframes fadeIn { 99% { visibility: hidden; } 100% { visibility: visible; } } /* ================== */后的一小段时间内显示。这样，如果新显示的链接低于指针事件，则不会注册点击。这是fiddle: https://jsfiddle.net/nu9vr1sm/。

HTML：

#include<stdio.h>
int main()
{
int i=1,n;
printf("enter value of n");
scanf("%d",&n);
for(i=1;i<=n;i++)
{
    printf("%d",i);
    if(i=5)
    break;
}
}

CSS：

def errorCheck(daySales):
  while True:
    try:
        daySales = float(daySales)

    except ValueError:
        print('Please only enter a number - for example: 7')
        print('Try again!')
    except Exception as err:
        print('Unknown error - please contact the programmer!')
        print(type(err))

    return(float(daySales))    

counter=0
day = ['Monday','Tuesday','Wednesday','Thursday',
       'Friday','Saturday','Sunday']
daySales=()
sales=[]
totalsales=[]

for i in range(len(day)):
    print('Enter sales for ' + day[i] + ': ', end="")
    daySales = input()
    errorCheck(daySales)
    sales = sales + [float(daySales)]

for i in range(len(day)):
    print('\nYour sales for ' + day[i] + ' were: $', sales[i], end="")

print('\nWhich equates to a weekly sales total of: $' ,end="")
sumOfList = sum(sales)
print(sumOfList)

如何防止显示在上面的链接：焦点/：激活自动点击触摸屏？

2 个答案: