隱藏指定標簽<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>