使用 jquery 或 javascript 在顶部显示菜单

Posted 2023-05-09

【中文标题】使用 jquery 或 javascript 在顶部显示菜单

【英文标题】：show menu to the top using jquery or javascript

【发布时间】：2021-06-18 19:51:09

【问题描述】：

我的项目左侧导航包含一个带有菜单的滚动，问题是当我打开一个菜单时，子菜单项会显示，而某些项目在我们必须滚动后会隐藏。所以我想 打开菜单时在顶部显示菜单显示在顶部不需要滚动用户如何实现;

例如：

【参考方案1】：

您好，您可以使用 javascript 或 jquery，因为您需要了解 javascript 中的 scrollIntoView() 方法及其工作原理.

您可以查看和阅读Here

因此，首先您需要在要显示的特定 div 上添加 id 或 class

假设我有这样的 html 代码

<li class="treeview" id="view"> // this treeview class is for showing submenu
  <a>Menu 4</a>
  <ul>
    <li>item 1</li>
    <li>item 1</li>
    <li>item 1</li>
  </ul>
<li>

之后只需在<script></script>标签中添加以下代码

$(".treeview").click(function(e)
      setTimeout(() => 
         var element = document.getElementById(e.currentTarget.id); // e.currentTarget.id give you current id when ever you click li or div this will give you view 
         if(e.currentTarget.id)
            element.scrollIntoView(
               behavior: 'smooth', block: 'nearest', inline: 'start',
            );
         
      , 500);  
 );