仅点击

Question

菜单与：

相同

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

如何？

谢谢

Answer 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

检查演示

Answer 2

先生。 @Caiuby Freitas 我找到了适用于此菜单的CSS：

＆＃13;

＆＃13;

/* 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;
			}

＆＃13;

＆＃13;

＆＃13;

从JS那里咬一口：

＆＃13;

＆＃13;

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)
});

＆＃13;

＆＃13;

＆＃13;