Question

在我的页面标题中，我有一个包含6个类别的列表，我想为每个类别添加一个子菜单，但仅在单击类别时显示它。（我想在我的script.js文件中只使用一个处理程序，特别是不为每个类别添加一个。 - 少代码）

以下是标题中列表的HTML：

babel-preset-stage-2

这是SCSS：

<ul id="menu">
  <li id="menu_item1" class="menu_item">About
    <div id="sub-menu1" class=“sub-menu”></div>
  </li>
  <li id="menu_item2" class="menu_item">Services
    <div id="sub-menu2" class=“sub-menu”></div>
  </li>
  <li id="menu_item3" class="menu_item">Portfolio
    <div id="sub-menu3" class=“sub-menu”></div>
  </li>
  <li id="menu_item4" class="menu_item">Blog
    <div id="sub-menu4" class=“sub-menu”></div>
  </li>
  <li id="menu_item5" class="menu_item">Pictures
    <div id="sub-menu5" class=“sub-menu”></div>
  </li>
  <li id="menu_item6" class="menu_item">Contacts
    <div id="sub-menu6" class=“sub-menu”></div>
  </li>
</ul>

这是我到目前为止所尝试的内容，但它不起作用：

#menu {
  position: absolute;
  right: 25px;
  top: 25px;

  .menu_item {
      position:relative;
      font-family: $OpenSansSemibold;
      font-size: 14px;
      color: #fff;
      text-transform: uppercase;
      list-style-type: none;
      display: inline-block;
      padding: 8px 16px;

    div.sub-menu {
        position:absolute;
        top:40px;
        left: 0;
        width: 200px;
        height: 116px;
        border: 1px solid green;
        background-image: url(../img/popupmenu_03.png);
        display: none;
    }


    &:hover{
        background: #62a29e;
        border-radius: 5px;
        border-bottom: 5px solid #528b86;
        cursor: pointer;

    }
  }
}

非常感谢任何帮助，谢谢！

Answer 1

只需删除.children（）即可。 .children（）已经访问直接子节点，而.find（）将从该元素遍历DOM树。所以在你的代码中，你正在寻找被点击的.menu_item直接孩子的任何孩子（孙子等）。 .sub-menu不是.menu_item的直接孩子的孩子，但它已经是那个元素;）我在这里使用.find（）方法，因为即使你的DOM发生了变化，它仍然可以工作。如果您没有对菜单的DOM结构进行任何更改，您可以安全地使用$（this）.children（）。toggle（）;

#menu {

  .menu_item {

    div.sub-menu {
        ....
        &.hidden {
            display: none;
        }
    }
  }
}

SCSS：

return View(s.OrderBy(e => e.MoleculeName).ToPagedList(pageNumber, pageSize));

Answer 2

请试试这个：

＆＃13;

jQuery( ".menu_item" ).click(function(e) {
  jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus
  jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu
});

＆＃13;

#menu {
  position: absolute;
  right: 25px;
  top: 25px;
}
#menu .menu_item {
  position: relative;
  font-family: 'OpenSansSemibold';
  font-size: 14px;
  color: #333; /*fff; changed just for display */
  text-transform: uppercase;
  list-style-type: none;
  display: inline-block;
  padding: 8px 16px;
}
#menu .menu_item div.sub-menu {
  position: absolute;
  top: 40px;
  left: 0;
  width: 200px;
  height: 116px;
  border: 1px solid green;
  background-image: url(../img/popupmenu_03.png);
  display: none;
}
#menu .menu_item:hover {
  background: #62a29e;
  border-radius: 5px;
  border-bottom: 5px solid #528b86;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
  <li id="menu_item1" class="menu_item">About
    <div id="sub-menu1" class="sub-menu"></div>
  </li>
  <li id="menu_item2" class="menu_item">Services
    <div id="sub-menu2" class="sub-menu"></div>
  </li>
  <li id="menu_item3" class="menu_item">Portfolio
    <div id="sub-menu3" class="sub-menu"></div>
  </li>
  <li id="menu_item4" class="menu_item">Blog
    <div id="sub-menu4" class="sub-menu"></div>
  </li>
  <li id="menu_item5" class="menu_item">Pictures
    <div id="sub-menu5" class="sub-menu"></div>
  </li>
  <li id="menu_item6" class="menu_item">Contacts
    <div id="sub-menu6" class="sub-menu"></div>
  </li>
</ul>

＆＃13;

如何在点击时使用jQuery添加标题子菜单？

2 个答案: