Question

我有来自客户的请求来处理他们的下拉菜单系统。我有菜单作为下拉菜单，但他们要求下降不是在悬停时发生，但必须“点击”才能显示它们，甚至是所有疯狂的子菜单。

此外，他们希望菜单在显示状态下保持打开（固定），即使顶级导航项目已关闭。我知道这是奇怪的行为，但这是他们想要的。应该注意的是，任何时候都只应打开一个顶部nab菜单项。他们使用iframe来显示href，所以我们此时不需要cookie来保存菜单的状态，但是对于未来会很好;）我不是一个javascript人，这是从我收集的代码拼凑而成，但我不知所措。我确实设法改变了一点JS来处理通过点击打开菜单但是一旦鼠标移出UL，它就会消失。

到目前为止，我已在此处发布了我的代码：http://jsfiddle.net/9dJ9T/8/

任何人都可以让菜单只在点击时显示并保持打开状态并“固定”直到它们随后都“取消固定”？理想情况下我认为jquery .toggle方法会更好但是这个菜单系统有很多UL和LI，我无法想象创建每个人的功能！有没有一种方法可以抽象出这样的函数来简化代码而不是最终的大量函数？我很想从JS大师那里学习!!

Answer 1

你不需要这一切。重新制作它。你可以用10行来解决这个问题。

添加类似onclick =“displaySubmenu（'someIdOrSomethingOrWhateverYouWant'）;”在每个标签上。

js必须类似

    function displaySubmenu(el)
    {
         // Hide all elements. (Easy to do)
         // Display the needed one. (document.getElementById('yourSetedId').style.display ='block');
    }

其余的是css和html。

如果你想保持淡入淡出只是保留该功能并将其设置在你的身份上。

Answer 2

试试这个

<div class="btn-group" id="myDropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Choice1</a></li>
<li><a href="#">Choice2</a></li>
<li><a href="#">Choice3</a></li>
<li class="divider"></li>
<li><a href="#">Choice..</a></li></ul></div>

和js

$('#myDropdown').on('hide.bs.dropdown', function () {
return false;

}）;

即使点击菜单外，如何让CSS下拉菜单保持打开状态？

2 个答案: