Question

如何制作它点击菜单上的1-打开切换菜单（默认情况下未打开） 2-关闭自身 - 如果单击其他父菜单试图让它适用于项目

我从cssdesk复制

＆＃13;

$('.inbox li').click(function(e) {
    $('.inbox li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});
$(document).ready(function () {
	$('.tree-toggler').click(function () {
		$(this).parent().children('ul.tree').toggle(300);
});
});

＆＃13;

	<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" class="cssdeck">

<ul class="inbox-nav nav" style="border-top: 1px solid #eef1f5; margin-top:10px;" >
					<li class="">
						<a href="javascript:;" id="fldr3">menu 1
					</li>
					<li class="">
						<a data-title="Inbox" data-type="important" href="javascript:;">2nd Menu</a>
					</li>
					<li class="">
						<a data-title="Sent" data-type="sent" href="javascript:;">menu2</a>
					</li>
					<li class="divider"></li>
                    <li class="active tree-toggler">
                      <a href="javascript:;" id="fldr2">Toggle menu</a></li>
                        <ul class="nav nav-list tree">
                         <li class=""><a href="#">Link</a></li>
                         <li class=""><a href="#">Link</a></li>
                       </ul>
					</li>
				</ul>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

＆＃13;

Answer 1

如果用户点击不是必要的，你可以通过CSS来做，这是第4个菜单项有子菜单项的例子

＆＃13;

.menu,
.menu-item {
  display: inline;
  cursor: default;
}
.menu-item.has-subItem {
  position: absolute;
}
.menu-item ul {
  display: none;
  position: absolute;
  top: 15px;
  left: 0;
  padding: 0;
}
.menu-item:hover ul {
  display: inline;
}

＆＃13;

<ul class='menu'>
  <li class='menu-item'>Item 1</li>

  <li class='menu-item'>Item 2</li>

  <li class='menu-item'>Item 3</li>

  <li class='menu-item has-subItem'>Item 4
    <ul>
      <li class='sub-item'>sub 1</li>
      <li class='sub-item'>sub 2</li>
      <li class='sub-item'>sub 3</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

在$('.inbox li').click()函数中，使用ul.tree元素上的jquery＆＃39; .hide()函数。由于.hide()如果元素已被隐藏，则不会执行任何操作，因此您无需检查是否需要隐藏该元素。

（同样，您可以将$this.addClass('active');语句从if中删除，因为如果已经添加了该类，它就不会做任何事情！）

当点击其他菜单

2 个答案: