Question

我已经实现了一个菜单示例，当我点击父菜单链接时，所有子元素都在其中可见，当我点击它折叠的任何子元素时......我在这里做了一个演示{{3} } ...当我点击子链接时，我希望列表只打开，并表明此链接已被选中...有人请帮助

  function showmenu(elem) {
        // Clear any currently open menu
        var openMenu = document.getElementById("activeMenu");
        if (openMenu) {
            openMenu.removeAttribute("id");
            // Stop if we're just closing the current menu
            if (openMenu === elem) {
                return;
            }
        }

        // Only apply it if the element actually has LI child nodes.
        // OPTIONAL: Will still work without if statement.
        if (elem.getElementsByTagName("li").length > 0) {
            elem.setAttribute("id", "activeMenu");
        }
    }

Answer 1

您可以将event.stopPropagation()添加到嵌套ul：

<ul id="nav">
    <li onclick="showmenu(this)" class="sectionMenu">
        Service
        <ul onclick="event.stopPropagation()">
            <li><a> Ro </a>    </li>
            <li> <a>List</a> </li>
            <li><a>Service Plan</a> </li>
        </ul>
    </li>
    ....
</ul>

Answer 2

您可以检查点击的实际元素是否是父元素（即具有类sectionMenu）。如果没有那么返回。

您可以通过在javascript中添加以下代码来实现此目的：

// Checks if element clicked has class sectionMenu. Otherwise return.
var $elementClicked = event.target;
if ($elementClicked.className != 'sectionMenu')
  return;

CodePen

  function showmenu(elem) {

    // Checks if element clicked has class sectionMenu. Otherwise return.
    var $elementClicked = event.target;
    if ($elementClicked.className != 'sectionMenu')
      return;

    // Clear any currently open menu
    var openMenu = document.getElementById("activeMenu");
    if (openMenu) {
      openMenu.removeAttribute("id");
      // Stop if we're just closing the current menu
      if (openMenu === elem) {
        return;
      }
    }

    // Only apply it if the element actually has LI child nodes.
    // OPTIONAL: Will still work without if statement.
    if (elem.getElementsByTagName("li").length > 0) {
      elem.setAttribute("id", "activeMenu");
    }
  }

       img {
         padding-left: 5px;
       }
       #nav {
         height: 100%;
         padding: 20px;
         cursor: pointer;
         border: 3px solid #3e4547;
         box-shadow: 2px 2px 8px #000000;
         border-radius: 3px;
         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;
       }
       ul {
         width: 200px;
         list-style: none;
         margin: 0;
         padding: 5px;
       }
       ul li {
         display: block;
         padding: 0 10px;
         overflow: hidden;
         padding: 5px;
       }
       ul ul {
         display: none;
       }
       ul ul li {
         float: none;
         user-select: #b6ff00;
       }
       #activeMenu ul {
         display: block;
       }
       ul li:hover {
         background-color: #bcbdc1;
       }
       ul ul li:hover {
         background-color: red;
       }
       .arrow {
         background-image: url("./png/2.png");
         transition: 0.3s;
         transform: rotateX(-180deg);
       }
       li.sectionMenu:before {
         content: '\2795';
         font-size: 13px;
         color: #777;
         float: right;
         margin-left: 5px;
       }
       li.sectionMenu#activeMenu:before {
         content: "\2796";
       }

<div>
  <ul id="nav">
    <li onclick="showmenu(this)" class="sectionMenu">
      Service
      <ul>
        <li><a> Ro </a> 
        </li>
        <li> <a>List</a> 
        </li>
        <li><a>Service Plan</a> 
        </li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Customer
      <ul>
        <li>New Customer</li>
        <li>customer List</li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Parts
      <ul>
        <li>New Part</li>
        <li>Parts List</li>

      </ul>
    </li>
    <li onclick="showmenu(this)" class="sectionMenu">
      Admin
      <ul>
        <li>New Employee</li>
        <li>Employee List</li>
        <li>Employee Roles</li>
        <li>Employee Work Schedulee</li>
        <li>Holidays</li>

        <li>Employee List</li>

      </ul>
    </li>
  </ul>
</div>

Answer 3

甚至U也可以尝试这个....记得为onclick处理程序传递事件参数

function showmenu(elem,event) {
        // Clear any currently open menu
        event.preventDefault();
        // alert(event.currentTarget.getAttribute("id"))
        var openMenu = document.getElementById("activeMenu");

        if (openMenu) {
            if(openMenu.children[0]==event.target.parentNode)
              return;
            openMenu.removeAttribute("id");
            // Stop if we're just closing the current menu
            if (openMenu === elem) {
                return;
            }
        }

        // Only apply it if the element actually has LI child nodes.
        // OPTIONAL: Will still work without if statement.
        if (elem.getElementsByTagName("li").length > 0) {   
          event.currentTarget.setAttribute("id", "activeMenu");
        }
    }

CodePen

单击子组件将关闭打开的列表

3 个答案: