主页 / 问题 / 571868
Accepted
Alex
Asked:2020-09-29 22:38:12 +0800 CST2020-09-29 22:38:12 +0800 CST

水平下拉菜单 - 修复

  • 772

请告诉我如何在下面的代码中执行此操作：

  • 通过单击此类列表具有的元素来下拉嵌套列表；（现在悬停完成）
  • 通过单击最终（通过嵌套）元素，以便关闭所有嵌套，例如，您可以显示 alert('next request');
  • 通过单击“顶级”菜单项，它会以红色突出显示，但是当您转到嵌套列表时，此选择会消失 - 如何解决？

var m = '';

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


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

upd_1我会澄清：第一个项目是点击打开的“愿望清单”，但如果鼠标指针超出下拉列表区域，它仍然会关闭。我想在不为每个 li 附加 id 的情况下获得最大的功能。

javascript

1 个回答

  1. Best Answer

    好像是这样，自己适应

    var menuElem = document.getElementById('sweeties');
var titleElem = menuElem.querySelector('.title');

titleElem.onclick = function() {
  menuElem.classList.toggle('open');
};
    .menu ul {
  margin: 0;
  list-style: none;
  padding-left: 20px;
  display: none;
}
.menu .title {
  font-size: 18px;
  cursor: pointer;
}
.menu .title::before {
  content: '▶ ';
  font-size: 80%;
  color: green;
}
.menu.open .title::before {
  content: '▼ ';
}
.menu.open ul {
  display: block;
}
    <div id="sweeties" class="menu">
  <span class="title">Сладости (нажми меня)!</span>
  <ul>
    <li>Торт</li>
    <li>Пончик</li>
    <li>Пирожное</li>
  </ul>

</div>

    • 1

相关问题