主页 / 问题 / 572248
Accepted
Alex
Asked:2020-09-30 22:14:39 +0800 CST2020-09-30 22:14:39 +0800 CST

判断被点击菜单项的嵌套层级

  • 772

请告诉我，如何找出他们点击的菜单嵌套级别？对于这样<li><a></a></li>的 ，它是最后一个元素，还是中间元素？最好不要为元素和跨浏览器分配额外的类。如果该元素是最后一个，那么当你点击它时，下拉列表必须关闭。谢谢你。

var m = '';

document.getElementById('hmenu').addEventListener("click", menu_onclick);


function menu_onclick() {
  // - - - - - - - - - - - - - - - - - - - - - - -
  // ? как узнать по какому уровню меню кликнули :
  //   - 1й уровень (Text_1, Text_2, Text_3)
  //   - 2й уровень (1, 2, 3)
  //   - 3й (a, b, c)
  // - - - - - - - - - - - - - - - - - - - - - - -
  // ? как узнать на какой уровень кликнули :
  //   первый, промежуточный, или последний
  // - - - - - - - - - - - - - - - - - - - - - - -
  var target = event.target || event.srcElement;
  if (target.style != m) {
    target.style.background = 'red';
    if (m != '') {
      m.background = '';
    }
    m = target.style;
  }
}
#menu {
  width: 100%;
  height: 30px;
  background: #ccc;
}
#hmenu {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
}
#hmenu li:nth-child(1) {
  width: 30%;
}
#hmenu li:nth-child(2) {
  width: 40%;
}
#hmenu li:nth-child(2) ul a {
  width: 150px;
}
#hmenu li:nth-child(2) >a:after {
  content: ' ▶';
  font-size: 12px;
}
#hmenu li:nth-child(2) li ul {
  background: #c6c6c6;
  left: 150px;
}
#hmenu li:nth-child(3) {
  width: 30%;
}
#hmenu li {
  float: left;
  position: relative;
}
#hmenu li a {
  font-size: 12px;
  text-decoration: none;
  display: block;
  line-height: 30px;
  text-align: center;
}
#hmenu li a:hover {
  background: goldenrod;
}
#hmenu li ul li {
  float: none;
}
#hmenu li ul li a {
  line-height: 25px;
}
#hmenu li ul {
  display: none;
  position: absolute;
  background-color: #c3c3c3;
  list-style: none;
  padding: 0;
}
#hmenu li:hover ul {
  display: block;
}
#hmenu li ul li ul,
#hmenu li:hover ul li ul {
  display: none;
  position: absolute;
  top: 0;
}
#hmenu li ul li:hover ul {
  display: block;
}
<body>
  <div id="menu">
    <ul id="hmenu">

      <li><a>Text_1</a>
      </li>
      <li><a>Text_2</a>
        <ul>
          <li><a>1</a>
          </li>
          <li><a>2</a>
            <ul>
              <li><a>a</a>
              </li>
              <li><a>b</a>
              </li>
              <li><a>c</a>
              </li>
            </ul>
          </li>
          <li><a>3</a>
          </li>
        </ul>
      </li>
      <li><a>Text_3</a>
      </li>
    </ul>
  </div>
</body>

javascript

3 个回答

  1. Best Answer

    使用 DOM 树导航功能并检查当前节点DOM 元素导航的邻居。搜索嵌套元素也会有所帮助。搜索：getElement* 和 querySelector*。

       if(target.parentNode.querySelector("ul") == null)
        console.log("последний элемент");
   if(target.parentNode.parentNode.id == "hmenu")
        console.log("элемент верхнего уровня");


    var m = '';

document.getElementById('hmenu').addEventListener("click", menu_onclick);


function menu_onclick() {
  // - - - - - - - - - - - - - - - - - - - - - - -
  // ? как узнать по какому уровню меню кликнули :
  //   - 1й уровень (Text_1, Text_2, Text_3)
  //   - 2й уровень (1, 2, 3)
  //   - 3й (a, b, c)
  // - - - - - - - - - - - - - - - - - - - - - - -
  // ? как узнать на какой уровень кликнули :
  //   первый, или последний
  // - - - - - - - - - - - - - - - - - - - - - - -
  var target = event.target || event.srcElement;
  
  if(target.parentNode.querySelector("ul") == null)
    console.log("последний элемент");
  if(target.parentNode.parentNode.id == "hmenu")
    console.log("элемент верхнего уровня");
  
  
  if ( target.style != m ) {
       target.style.background = 'red';                    if (m != '') {
           m.background = '';                              }  
       m = target.style;
  }  
}
    #menu {
	width:100%;
	height:30px;
    background:#ccc;
}
#hmenu {
	width:100%;
	padding:0;
	margin:0;
	list-style-type:none;
    position:relative;
}

#hmenu li:nth-child(1) {
	width:30%;
}
#hmenu li:nth-child(2) {
	width:40%;
}
#hmenu li:nth-child(2) ul a{
   width:150px;
}
#hmenu li:nth-child(2) >a:after {
    content: ' ▶';
    font-size: 12px;
}
#hmenu li:nth-child(2) li ul {
   background:#c6c6c6;
   left:150px;
}
#hmenu li:nth-child(3) {
	width:30%;
}

#hmenu li{
	float:left;
    position:relative;
}
#hmenu li a{
	font-size:12px;
	text-decoration:none;
	display:block;
	line-height:30px;
    text-align: center;
}
#hmenu li a:hover{
	background: goldenrod;
}
#hmenu li ul li{
    float:none;
}
#hmenu li ul li a{
    line-height:25px;
}
#hmenu li ul{
    display:none;
    position:absolute;
    background-color: #c3c3c3;
    list-style:none;
    padding:0;
}
#hmenu li:hover ul{
    display:block;
}
#hmenu li ul li ul,
#hmenu  li:hover ul li ul{
    display:none;
    position:absolute;
    top:0;
}
#hmenu li ul li:hover ul{
    display:block;
}
    <body>
<div id="menu">
<ul id="hmenu">

 <li><a>Text_1</a></li>   
 <li><a>Text_2</a>
    <ul>
       <li><a>1</a></li>
       <li><a>2</a>
            <ul>
                <li><a>a</a></li> 
                <li><a>b</a></li>
                <li><a>c</a></li>
            </ul>	
                </li>
       <li><a>3</a></li>
    </ul>
 </li>
 <li><a>Text_3</a></li>
</ul>
</div>
</body>

    • 2

  2. 将 EventListeners 挂在 - 元素上，那么你可以这样定义它：

    var m = '';

//document.getElementById('hmenu').addEventListener("click", menu_onclick);
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", menu_onclick);
}


function menu_onclick() {
  console.log(this.parentElement.getElementsByTagName('ul'));
  if(!this.parentElement.getElementsByTagName('ul').length) {
    //Последний уровень вложенности  
  }
  // - - - - - - - - - - - - - - - - - - - - - - -
  // ? как узнать по какому уровню меню кликнули :
  //   - 1й уровень (Text_1, Text_2, Text_3)
  //   - 2й уровень (1, 2, 3)
  //   - 3й (a, b, c)
  // - - - - - - - - - - - - - - - - - - - - - - -
  // ? как узнать на какой уровень кликнули :
  //   первый, промежуточный, или последний
  // - - - - - - - - - - - - - - - - - - - - - - -

  var target = event.target || event.srcElement;
  if (target.style != m) {
    target.style.background = 'red';
    if (m != '') {
      m.background = '';
    }
    m = target.style;
  }
}
    #menu {
  width: 100%;
  height: 30px;
  background: #ccc;
}
#hmenu {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
}
#hmenu li:nth-child(1) {
  width: 30%;
}
#hmenu li:nth-child(2) {
  width: 40%;
}
#hmenu li:nth-child(2) ul a {
  width: 150px;
}
#hmenu li:nth-child(2) >a:after {
  content: ' ▶';
  font-size: 12px;
}
#hmenu li:nth-child(2) li ul {
  background: #c6c6c6;
  left: 150px;
}
#hmenu li:nth-child(3) {
  width: 30%;
}
#hmenu li {
  float: left;
  position: relative;
}
#hmenu li a {
  font-size: 12px;
  text-decoration: none;
  display: block;
  line-height: 30px;
  text-align: center;
}
#hmenu li a:hover {
  background: goldenrod;
}
#hmenu li ul li {
  float: none;
}
#hmenu li ul li a {
  line-height: 25px;
}
#hmenu li ul {
  display: none;
  position: absolute;
  background-color: #c3c3c3;
  list-style: none;
  padding: 0;
}
#hmenu li:hover ul {
  display: block;
}
#hmenu li ul li ul,
#hmenu li:hover ul li ul {
  display: none;
  position: absolute;
  top: 0;
}
#hmenu li ul li:hover ul {
  display: block;
}
    <body>
  <div id="menu">
    <ul id="hmenu">

      <li><a>Text_1</a>
      </li>
      <li><a>Text_2</a>
        <ul>
          <li><a>1</a>
          </li>
          <li><a>2</a>
            <ul>
              <li><a>a</a>
              </li>
              <li><a>b</a>
              </li>
              <li><a>c</a>
              </li>
            </ul>
          </li>
          <li><a>3</a>
          </li>
        </ul>
      </li>
      <li><a>Text_3</a>
      </li>
    </ul>
  </div>
</body>

    • 2

  3. 大概计算父菜单容器的数量。 

    let root = document.getElementById('hmenu');

root.addEventListener("click", menu_onclick);

function getLevel(el){
	let level = 0, current = null;

	while(current = el.closest('ul')){
		level++;

		if(current === root)
			break;
		else
			el = current.parentNode;
	}

	return level;
}

function menu_onclick(e){
  let target = e.target,
      level  = getLevel(target);
  
  console.info(level);
}
    #menu {
  width: 100%;
  height: 30px;
  background: #ccc;
}
#hmenu {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
}
#hmenu li:nth-child(1) {
  width: 30%;
}
#hmenu li:nth-child(2) {
  width: 40%;
}
#hmenu li:nth-child(2) ul a {
  width: 150px;
}
#hmenu li:nth-child(2) >a:after {
  content: ' ▶';
  font-size: 12px;
}
#hmenu li:nth-child(2) li ul {
  background: #c6c6c6;
  left: 150px;
}
#hmenu li:nth-child(3) {
  width: 30%;
}
#hmenu li {
  float: left;
  position: relative;
}
#hmenu li a {
  font-size: 12px;
  text-decoration: none;
  display: block;
  line-height: 30px;
  text-align: center;
}
#hmenu li a:hover {
  background: goldenrod;
}
#hmenu li ul li {
  float: none;
}
#hmenu li ul li a {
  line-height: 25px;
}
#hmenu li ul {
  display: none;
  position: absolute;
  background-color: #c3c3c3;
  list-style: none;
  padding: 0;
}
#hmenu li:hover ul {
  display: block;
}
#hmenu li ul li ul,
#hmenu li:hover ul li ul {
  display: none;
  position: absolute;
  top: 0;
}
#hmenu li ul li:hover ul {
  display: block;
}
    <body>
  <div id="menu">
    <ul id="hmenu">

      <li><a>Text_1</a>
      </li>
      <li><a>Text_2</a>
        <ul>
          <li><a>1</a>
          </li>
          <li><a>2</a>
            <ul>
              <li><a>a</a>
              </li>
              <li><a>b</a>
              </li>
              <li><a>c</a>
              </li>
            </ul>
          </li>
          <li><a>3</a>
          </li>
        </ul>
      </li>
      <li><a>Text_3</a>
      </li>
    </ul>
  </div>
</body>

    А какой уж последний или первый - это решайте сами, зависит от вашей задачи.
    P. S. Закрыть/открыть что-то нельзя, т. к. реализация этих действий на CSS. А колдунство с классами не одобрено.

    • 2

相关问题