如何查看菜单的哪个元素被按下？

Question

我正在做一个学校项目，我们必须为一家餐厅做一个虚拟静态菜单。到目前为止，我所做的是：当我单击一个按钮时，会出现一个弹出窗口，它包含在带有 class="menu" 的 div 中。问题是，我将所有菜单项存储在 JSON 文件中，因此我不知道菜单中将包含多少项。如果您看一下下面的代码，您会发现每个菜单项都包含在

标记中。现在，您还可以看到描述从显示开始：none；属性。我想做的是：使用 Javascript（我认为普通 HTML 和 CSS 不可能），如何设置要显示的描述样式：堵塞;当“标题”class 或“svg-container”class 被调用时，该特定项目的？在任何一种情况下，当 svg 或标题被按下时，svg 必须旋转 90 度，再次单击时 return 必须旋转 0 度。问题是我不知道如何获取已按下的确切项目的参考，所以我可以显示它的描述...

这是菜单目前的外观的直观表示：

这就是为什么我需要将描述设置为显示：块；

<div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>
                <label>
                    <div class="svg-container"> <img class="arrow" src="right-arrow.svg"/></div>
                    <span class="title">Fried Fish With Souce</span>
                    <div class="description" style="display: none;">
                            This is some internal content.This is some internal content.This is some internal content.
                    </div>
                </label>
            </li>
            <li>
                <label>
                    <div class="svg-container"> <img class="arrow" src="right-arrow.svg"/></div>
                    <span class="title">Spaghetti</span>
                    <div class="description" style="display: none;">
                            This is some internal content.This is some internal content.This is some internal content.
                    </div>
                </label>
            </li>
        </ul>
    </div>

我尽力把问题解释清楚了，对于任何问题或不确定的地方，我都会在这里回答。提前致谢！

编辑： 感谢大家的快速帮助，但是在实现你的代码之后，有一个小问题，看看当标题太长无法放入菜单时会发生什么div:

正如你所看到的，标题完全在一个新行上移动，但它应该只是移动不适合的内容（不拆分单词，只有在有 space 的情况下）新线。

Answer 1

您需要做的就是在 .menu 级别处理点击，然后使用 [event.target][1] 准确确定菜单中的哪个项目被点击。这种方法使用一种称为“event delegation”的技术来利用事件冒泡。

// Set up event listener on the menu
document.querySelector(".menu").addEventListener("click", function(event){
  // The actual item within the menu that was clicked is accessible 
  // through event.target. So, we'll find the nearest ancestor <li> 
  // of that, and then search for the .description element within that
  // and change the style
  event.target.closest("li").querySelector(".description").classList.remove("hidden");

});

.hidden { display:none; }

<div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>
                    <div class="svg-container"> 
                      <img class="arrow" src="right-arrow.svg"/>
                      <span class="title">Fried Fish With Souce</span>
                    </div>
                    <div class="description hidden">
                            This is some internal content.This is some internal content.This is some internal content.
                    </div>
            </li>
            <li>
                    <div class="svg-container"> 
                      <img class="arrow" src="right-arrow.svg"/>
                      <span class="title">Spaghetti</span>
                    </div>
                    <div class="description hidden">
                            This is some internal content.This is some internal content.This is some internal content.
                    </div>
            </li>
        </ul>
    </div>

其他：

您没有正确使用 label element。这是为了将标题与表单字段相关联，而不是常规 HTML 元素。
如果您希望菜单项的文本位于箭头旁边，您将需要 span 位于前一个 div 的内部，而不是外部它。
尽可能避免内联样式并使用 CSS 类。
如果您希望能够切换所点击项目的可见性（show/hide/show/hide等），使用.classList.toggle instead of classList.remove.

如何查看菜单的哪个元素被按下？

How to see which element of menu has been pressed?

html

javascript

css

popup