單擊父 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";
});