Javascript 仅单击时需要活动菜单

菜单与以下菜单相同：

数据下拉列表class='left'>

使用JQuery，您可以通过以下方式简单地完成：

$('.sub-menu').hide();

$("li:has(ul)").click(function() {
    $("ul",this).slideDown();
});

$(document).on('click', 'a.menu', function(e) {
  e.preventDefault();
  $(this).siblings('.sub-menu').slideToggle();
});

只需将类添加到子菜单的

ul

中，如：

<li id="nav_more" data-dropdown class='left'>
  <a href="#">MENU 
    <img src="/dropdown_arrow.png" alt="" />
  </a>
  <ul class="sub-menu">
    <li>
      <a href="#">
        <img src="/user-info-icon.png" alt="" /> SubMenu 1
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/chart-search-icon.png" alt="" /> SubMenu 2
      </a>
    </li>
  </ul>
</li>

添加到CSS

display:none

子菜单：

.sub-menu {
  display: none;
}

并在以下情况下使用JQuery：

$('.sub-menu').hide();

$("li:has(ul)").click(function() {
    $("ul",this).slideDown();
});

$(document).on('click', 'a.menu', function(e) {
  e.preventDefault();
  $(this).siblings('.sub-menu').slideToggle();
});

查看位于@Caiuby Freitas先生的演示 我找到了适用于此菜单的CSS：

/*无闪烁*/
[data dropdown]ul、[data box]、[data DomainBox]、[data store]、[data DomainBalloon]{显示：无；}
/*下拉菜单*/
[数据下拉列表]{位置：相对；}
[data dropdown=right]ul{right:0px；}
/*子菜单*/
[数据下拉]ul{
背景色：#fafafa；
盒影：0.4px4pRGBA（0,0,0,0.2）；
-webkit盒阴影：0.4px4pRGBA（0,0,0,0.2）；
-莫兹盒阴影：0.4px4pRGBA（0,0,0,0.2）；
边界半径：4px 0 4px 4px；
-moz边界半径：4px 0 4px 4px；
-webkit边框左下半径：4px；
-webkit边框右下半径：4px；
-webkit边框左上半径：4px；
字体大小：0.95em！重要；
文本阴影：1px 1px 1px#fff！重要；
宽度：190px；
位置：绝对位置；
z指数：10000；
保证金：0；
填充：0！重要；
右：0；
-webkit转换延迟：500ms；
-moz转换延迟：500ms；
-o-过渡延迟：500ms；
过渡延迟：500ms；
}
[数据下拉]ul li{
边距：0！重要；
填充：0！重要；
显示：块！重要；
浮动：无！重要；
文本对齐：左！重要；
文本转换：无！重要；
边框底部：1px实心rgba（0,0,0,0.08）；
}
[数据下拉]ul li a{
背景：透明！重要；
边界半径：4px！重要；
-moz边界半径：4px！重要；
-webkit边界半径：4px！重要；
盒影：无！重要；
-网络工具包盒阴影：无！重要；
-莫兹盒影：无！重要；
边距：0！重要；
填充：4px！重要；
颜色：#555！重要；
边界：0！重要；
显示：块！重要；
浮动：无！重要；
}
[数据下拉]ul li a img{
位置：相对位置；
页边顶部：1px；
右边距：2px；
不透明度：0.3；
过滤器：α（不透明度=30）；
}
[数据下拉]ul li a:悬停{
背景：#efef！重要；
颜色：#000！重要；
边界：0！重要；
}
[数据下拉]ul li a：悬停img{
不透明度：0.8；
过滤器：α（不透明度=80）；
}
[数据下拉]ul li a：激活{
背景：#6！重要；
边界：0！重要；
颜色：rgba（0,0,0,0.5）！重要；
}

您尝试了什么？发布你的CSS和JS代码。使用jQuery，如果我没有更多的代码（CSS和javascript），我不能禁用hover并只启用onclick？谢谢。我将尝试发布结果。是的。小提琴演奏得很好。但是在我的index.html中不起作用：（嗨，你能帮我检查一下我的网站吗？