隐藏指定标签<li>从我的代码 JavaScript function 但不工作</li>

Question

我试图通过（功能 dmenubutton）删除或隐藏第一个按钮或第二个按钮，但它不起作用。

 function showitems(cell) { cell.querySelector(".items").style.display = "block"; } function hideitems(cell) { cell.querySelector(".items").style.display = "none"; } function showitem(cell) { cell.querySelector(".bottoneditmenu").style.display = "block"; } function hideitem(cell) { cell.querySelector(".bottoneditmenu").style.display = "none"; } function dmenubutton(call) { cell.querySelector(".bottonmenu").style.display = 'none'; }

 .bottonmenu { display: inline-block; padding: 10px; background: #b7c0cd; cursor: pointer; }.Deletetbuttonmenud { color: #2b9ff6; background: #222c3c; font-size: 12px; border-radius: 3px; }.Deletetbuttonmenue { color: #2b9ff6; background: #222c3c; font-size: 12px; border-radius: 3px; padding: 1px 3px 1px 3px; }.Deletetbuttonmenue:hover, .Deletetbuttonmenud:hover { opacity: 0.8; }.bottoneditmenu { position: absolute; display: none; }

 <ul> <li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">First botton <div class="bottoneditmenu"> <span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span> <span class="Deletetbuttonmenue">Edit</span> </div> </li> <li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">Sacand botton <div class="bottoneditmenu"> <span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span> <span class="Deletetbuttonmenue">Edit</span> </div> </li> </ul>

Answer 1

您正在使用 class Deletetbuttonmenud 单击跨度，并在该跨度内使用bottonmenu Deletetbuttonmenud搜索元素。

你也有一个错字，在 function 你叫call和里面的cell

cell.querySelector工作方式如下：当您单击 item(cell) 并在其上附加.querySelector时，它会在该单击元素内搜索术语。

从parentElement可以看出，您想隐藏该单击跨度的父元素（带有parentElement bottonmenu的li元素）的父元素：

cell.parentElement.parentElement.style.display = 'none';

 function showitems(cell) { cell.querySelector(".items").style.display = "block"; } function hideitems(cell) { cell.querySelector(".items").style.display = "none"; } function showitem(cell) { cell.querySelector(".bottoneditmenu").style.display = "block"; } function hideitem(cell) { cell.querySelector(".bottoneditmenu").style.display = "none"; } function dmenubutton(cell) { cell.parentElement.parentElement.style.display = 'none'; }

 .bottonmenu { display: inline-block; padding: 10px; background: #b7c0cd; cursor: pointer; }.Deletetbuttonmenud { color: #2b9ff6; background: #222c3c; font-size: 12px; border-radius: 3px; }.Deletetbuttonmenue { color: #2b9ff6; background: #222c3c; font-size: 12px; border-radius: 3px; padding: 1px 3px 1px 3px; }.Deletetbuttonmenue:hover, .Deletetbuttonmenud:hover { opacity: 0.8; }.bottoneditmenu { position: absolute; display: none; }

 <ul> <li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">First botton <div class="bottoneditmenu"> <span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span> <span class="Deletetbuttonmenue">Edit</span> </div> </li> <li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">Sacand botton <div class="bottoneditmenu"> <span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span> <span class="Deletetbuttonmenue">Edit</span> </div> </li> </ul>