单击父 div 时，子菜单隐藏/显示不锻炼

Question

我有这个垂直菜单：

<li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a>
    <ul style="display:none" class="submenus">
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li> 

如您所见，我已经为 class submenus设置了display:none ，然后在此 Javascript 代码中，当用户单击菜单项时，我尝试显示子菜单menu item ：

$(document).on('click','#verticalMenu',function(){
    let sbm = document.querySelector(".submenus");
    sbm.style.display = "block";
});

但是现在这个东西不起作用并且不显示子菜单项。

但是，我已确保 onlick 事件成功运行。

我还尝试显示这样的子菜单项：

sbm.toggle();

但它说： toggle 不是 function

那么这里出了什么问题？ 单击带有verticalMenu id 的链接时，如何正确隐藏/显示此.submneus class ？

Answer 1

您不会删除显示块，因此只要您单击一次，它就会始终显示。 第一次单击后，您必须再次将显示更改为无。

 $(document).on('click','#verticalMenu',function(){ let sbm = document.querySelector(".submenus"); console.log(sbm.style.display) if(sbm.style.display == "block") { sbm.style.display = "none"; } else { sbm.style.display = "block"; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a> <ul style="display:none" class="submenus"> <li><a href="">Sub menu item 1</a></li> <li><a href="">Sub menu item 2</a></li> </ul> </li>

更优雅的解决方案是正确实现 jquery 中的切换 function。 我还为您的菜单元素设置了 cursor 的样式，因此当 cursor 位于其上时，会有可见的响应。

 $(document).on('click','#verticalMenu',function(){ $(".submenus").toggle("100"); //remove the 100ms if you don't want an animation. });

 .vertical_menu_group_item { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a> <ul style="display:none" class="submenus"> <li><a href="">Sub menu item 1</a></li> <li><a href="">Sub menu item 2</a></li> </ul> </li>

有关更多信息，请参阅https://api.jquery.com/toggle/ 。

Answer 2

function Change(){
    let sbm = document.querySelector(".submenus");
     if (sbm.style.display !== "none") {  
                sbm.style.display = "none";  
            }  
            else {  
                sbm.style.display = "block";  
            }  
};

HTML:

<li class="vertical_menu_group_item orange" id="verticalMenu" onClick = Change()><a class="mx-3" >Menu item</a>
    <ul style="display:none" class="submenus">
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li> 

在这里试试这个它的工作

Answer 3

问题是您正在尝试在 javascript 元素 ZA8CFDE6331BD59EB466AC96F8911 的帮助下运行 jQuery function。

您可以像这样使用.toggle() ：

 $(document).on('click', '#verticalMenu', function() { $(".submenus").toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="vertical_menu_group_item orange" id="verticalMenu"> <a class="mx-3">Menu item</a> <ul style="display:none" class="submenus"> <li><a href="">Sub menu item 1</a></li> <li><a href="">Sub menu item 2</a></li> </ul> </li>

Answer 4

当您在<ul>标记下使用display:none时，它会完全删除 dom 中的元素。 因此，当您在浏览器上检查它时，您看不到那里的代码，因为它不存在。 因为那个toggle()不起作用，因为DOM中不存在该元素并且没有得到class。 这就是为什么它说“切换不是功能”的原因。 因此，不要使用display属性，而是使用visibility 。

<li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a>
<ul style="visibility:hidden;height:0px" class="submenus">
    <li><a href="">Sub menu item 1</a></li>
    <li><a href="">Sub menu item 2</a></li>
</ul>

在使用 visibility:"hidden" 属性和 height:"auto" 时，将高度设置为 0px 以删除空间。

$(document).on('click','#verticalMenu',function(){
let sbm = document.querySelector(".submenus");
sbm.style.visibility = "visible";
sbm.style.height = "auto";
});