当只有一个子菜单被悬停时，防止多个子菜单同时可见（由于转换延迟）

Posted 2023-05-08

【中文标题】当只有一个子菜单被悬停时，防止多个子菜单同时可见（由于转换延迟）

【英文标题】：Prevent multiple submenu's from being visible at the same time (due to transition delay) when only one is being hovered

【发布时间】：2016-05-04 01:27:01

【问题描述】：

在这里更新了代码示例。

很难用标题来概括，我做了一个代码笔来显示正在发生的事情：

http://codepen.io/erikdevos/pen/eJMmpy

    /* menu container styling  */
#nav 
    background: #f5f5f5;
    width:500px;
    display:flex;


/* style all unondered lists */
ul 
    text-decoration: underline;
    list-style-type: none;
    background: #cecece;


/* give submenu different background */
ul li ul 
    background: #e3e3e3;


/* add pointer to menu */
ul:hover 
    cursor: pointer;


/* make menu items visible when menu is hovered */
ul:hover > li 
    visibility: visible;
    transition-delay: 0s;


/* make menu items 
and add transition delay */
ul > li 
    visibility: hidden;
    transition-delay: .5s;

ul li:hover li 
    visibility: visible;
    transition-delay: 0s;


ul li:hover ul 
    visibility: visible;
    transition-delay: 0s;

菜单 html 看起来像这样

<div id="nav">

            <ul>MENU
                <li>item 1</li>
                <li>item 1</li>
                <li>submenu 1
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
                <li>submenu 2
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
                <li>submenu 3
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
            </ul>

</div>

我制作了一个包含一些子菜单的菜单，并为可见性添加了过渡延迟：悬停/离开悬停时的“可见”和“隐藏”css 属性，以防止菜单在您移出菜单时过早消失。

但是，当您快速悬停多个项目时，这也会导致同时打开多个子菜单。 （你可以在笔中看到这个）

当另一个子菜单项正在显示时，我不知何故需要剪切子菜单的动画/过渡！

在 CSS 中我无能为力，这主要是我的领域，但我感觉 javascript 或 jQuery 可以以某种方式监控属性和元素，并在元素 B 悬停时将元素 A 的转换延迟设置为 0 .这是一个可行的解决方案，还是有其他功能？

【问题讨论】：

当另一个子菜单悬停时，您可能需要使用 JavaScript 隐藏子菜单

基本上，这是我的问题，是的。

【参考方案1】：

添加ul li:hover li transition-delay: 5s 不会出现，而其他li with transition-delay: 4s 不隐藏

或者像这样使用一些

 $('ul').find('li').each($('this').css('visibility','hidden'));

【讨论】：

恐怕这两种解决方案都无法解决我的问题。也许我没有正确解释情况。当您悬停菜单项时，会出现一个子菜单。当您用鼠标离开此子菜单时，会有一个（css 转换）延迟，以防止您意外移动和关闭菜单。但是，当您将鼠标悬停在出现子菜单的多个菜单项上时，它们都会停留在设置的“转换延迟”时间。我想更改此设置，以便当另一个项目悬停/可见时，任何其他仍在“过渡”/延迟的项目将关闭（或只是将延迟更改为 0）

【参考方案2】：

显示所有菜单 HTML 代码（你放了链接，但我无法在我的旧浏览器和低速互联网中打开网站）以便于理解你在哪里显示女巫元素。因为如果我将您的 html 代码放入文件并打开，则不会显示任何内容，因为 li 设置为 visibility:hidden。这里怎么能被点击或鼠标悬停。

css 不会更改 css。试试jquery。你还想要什么？

$('ul').find('li').each( if($(this).attr('hovered')=='not') $('this').css('display','none');  );

你还有待确定如何在jquery中确定悬停元素（$(this).attr('hovered')==not）

【讨论】：

我更新了主帖中的代码，它现在拥有完整的 html 和 css。