仅单击时需要活动菜单答案

【问题标题】：Need active menu when only clicked仅单击时需要活动菜单
【发布时间】：2017-10-27 10:54:01
【问题描述】：

菜单与：

<li id="nav_more" data-dropdown class='left'>
  <a href="#">MENU 
    <img src="/dropdown_arrow.png" alt="" />
  </a>
  <ul>
    <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>

鼠标悬停时需要禁用显示菜单。只有在 MENU 中单击时我才需要显示菜单。

怎么做？

谢谢

【问题讨论】：

你尝试过什么？也发布你的 CSS、JS 代码。
如果我没有更多代码（css&javascript），我无法使用 jQuery 禁用悬停并仅启用 onclick？

标签： javascript html onclick hover

【解决方案1】：

您可以使用 JQuery 简单地完成以下操作：

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

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

只需在子菜单的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>

在 JS FIDDLE

上查看演示

如果再次单击，上述解决方案不会隐藏子菜单。你可以试试这个：

将menu 类添加到a：

<li id="nav_more" data-dropdown class='left'>
  <a href="#" class="menu">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：

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

在 JS FIDDLE

上查看演示

【讨论】：

谢谢。我会尝试发布结果。
是的。在小提琴工作正常。但是在我的 index.html 中不起作用:(
嗨。你能帮我检查一下我的网站吗？

【解决方案2】：

先生。 @Cauiby Freitas 我找到了适用于这个菜单的 CSS：

/* No Flickering */
[data-dropdown] ul, [data-box], [data-dombox], [data-store], [data-domballoon] { display: none;}

/* Dropdown Menu */
[data-dropdown] { position: relative; }
[data-dropdown=right] ul { right: 0px; }

/* Submenu */
[data-dropdown] ul {
	background-color: #fafafa;
	box-shadow: 0 4px 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 4px 4px rgba(0,0,0,0.2);
	border-radius: 4px 0 4px 4px;
	-moz-border-radius: 4px 0 4px 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	font-size: 0.95em !important;
	text-shadow: 1px 1px 1px #fff !important;
	width: 190px;
	position: absolute;
	z-index: 10000;
	margin: 0;
	padding: 0 !important;
	right: 0;
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

	[data-dropdown] ul li {
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		float: none !important;
		text-align: left !important;
		text-transform: none !important;
		border-bottom: 1px solid rgba(0,0,0,0.08);
	}

		[data-dropdown] ul li a {
			background: transparent !important;
			border-radius: 4px !important;
			-moz-border-radius: 4px !important;
			-webkit-border-radius: 4px !important;
			box-shadow: none !important;
			-webkit-box-shadow: none !important;
			-moz-box-shadow: none !important;
			margin: 0 !important;
			padding: 4px !important;
			color: #555 !important;
			border: 0 !important;
			display: block !important;
			float: none !important;
		}

		[data-dropdown] ul li a img {
			position: relative;
			margin-top: 1px;
			margin-right: 2px;
			opacity: 0.3;
			filter: Alpha(opacity=30);
		}

			[data-dropdown] ul li a:hover {
				background: #efefef !important;
				color: #000 !important;
				border: 0 !important;
			}

			[data-dropdown] ul li a:hover img {
				opacity: 0.8;
				filter: Alpha(opacity=80);
			}

			[data-dropdown] ul li a:active {
				background: #e6e6e6 !important;
				border: 0 !important;
				color: rgba(0,0,0,0.5) !important;
			}

从 JS 咬一口：

Platform.module(function(b, a, c) {
    var d = function(b, a) {
        0 < a.length && (a.stop(!0, !0), c.show(a, {
            type: "fade",
            duration: 250
        }))
    };
    Platform.dropdowns = function() {
        b("[data-dropdown]").each(function() {
            var a = b(this),
                g = a.children(":eq(1)");
            g.hide();
            g.addClass("sb-dropdown-off"); - 1 !== a.attr("data-dropdown").indexOf("click") ? a.click(function(f) {
                f.preventDefault();
                g.is(":visible") || (d(a, g, {}), f.stopPropagation(), b(document).bind("click", function(a) {
                    a.preventDefault();
                    !b(a.target).is(g) && !b(a.target).parentsUntil(g).parent().is("ul") &&
                        (b(document).unbind("click"), 0 < g.length && c.hide(g, {
                            type: "fade",
                            duration: 250
                        }))
                }))
            }) : a.hover(function() {
                d(a, g, {})
            }, function() {
                0 < g.length && c.hide(g, {
                    type: "fade",
                    duration: 250
                })
            })
        })
    };
    c.autoload(Platform.dropdowns)
});

【讨论】：