使用vanilla javascript在<li>上关闭下拉菜单单击

，可以通过以下步骤实现：

首先，为<li>元素添加一个点击事件监听器。
在事件处理程序中，获取下拉菜单的引用。
检查下拉菜单的当前状态，如果是打开的，则关闭它；如果是关闭的，则不执行任何操作。
为了关闭下拉菜单，可以通过修改下拉菜单的样式属性来隐藏它，比如设置display属性为"none"。
如果需要在点击<li>元素时同时关闭其他已打开的下拉菜单，可以在事件处理程序中添加逻辑来关闭其他下拉菜单。

以下是一个示例代码：

// 获取<li>元素
var listItem = document.querySelector("li");

// 添加点击事件监听器
listItem.addEventListener("click", function() {
  // 获取下拉菜单的引用
  var dropdownMenu = this.querySelector(".dropdown-menu");

  // 检查下拉菜单的当前状态
  if (dropdownMenu.style.display === "block") {
    // 关闭下拉菜单
    dropdownMenu.style.display = "none";
  } else {
    // 打开下拉菜单
    dropdownMenu.style.display = "block";
  }

  // 关闭其他已打开的下拉菜单
  var allDropdownMenus = document.querySelectorAll(".dropdown-menu");
  allDropdownMenus.forEach(function(menu) {
    if (menu !== dropdownMenu) {
      menu.style.display = "none";
    }
  });
});

这段代码会在点击<li>元素时切换下拉菜单的显示状态，如果下拉菜单是打开的，则关闭它；如果下拉菜单是关闭的，则打开它。同时，它还会关闭其他已打开的下拉菜单，以确保只有一个下拉菜单是打开的。

请注意，这只是一个示例代码，具体实现方式可能会根据具体的HTML结构和样式而有所不同。此外，如果需要在其他地方使用类似的功能，可以根据具体情况进行修改和调整。