側邊欄使用jQuery更改選單的內容-有解無憂

大家好，誰能幫我解決這個問題？我的目標是當我單擊主選單時會顯示子選單，當我單擊子選單時會顯示 subChildmenu。任何人都可以幫助我如何使用jQuery來完成它嗎？就像這個視頻 https://www.screencast.com/t/C85Oiz3jnfLb

* {
  padding: 0;
  margin: 0;
}

.sidebar {
    position: absolute;
    left: 0;
    background: yellow;
    padding: 10px;
    height: 100vh;
    width: 320px;
}

<div class="sidebar">
  <div class="sidebar-main">
    <div class="sidebar-menu">Home</div>
    <div class="sidebar-menu">Budget</div>
    <div class="sidebar-menu">Main Menu 3</div>
  </div>
  
  <div class="sidebar-submenu">
    <div class="sidebar-submenu">Data Config</div>
    <div class="sidebar-submenu">Data Setup</div>
    <div class="sidebar-submenu">submenu 3</div> 
  </div>
  
  <div class="sidebar-subChildmenu">
    <div class="sidebar-subChildmenu">Budget Period</div>
    <div class="sidebar-subChildmenu">Budget Date</div>
    <div class="sidebar-submsubChildmenuenu">subChildmenu 3</div>    
  </div>
</div>

uj5u.com熱心網友回復：

我添加了兩個 #idtoggele-submenu和toggle-subChildmenu，您可以參考下面的 jQuery 腳本。

/*Hide menu by default*/
$(document).ready(function() {
  $(".sidebar-submenu").hide();
  $(".sidebar-subChildmenu").hide();
});

/*When menu button is clicked, toggle the menu*/
$("#toggle-submenu").click(function(event) {
  event.stopPropagation();
  $(".sidebar-submenu").slideToggle();
});
$("#toggle-subChildmenu").click(function(event) {
  event.stopPropagation();
  $(".sidebar-subChildmenu").slideToggle();
});

* {
  padding: 0;
  margin: 0;
}

.sidebar {
  position: absolute;
  left: 0;
  background: yellow;
  padding: 10px;
  height: 100vh;
  width: 320px;
}

<div class="sidebar">
  <div class="sidebar-main">
    <div class="sidebar-menu">Home</div>
    <div class="sidebar-menu">Budget</div>
    <div id="toggle-submenu" class="sidebar-menu">Main Menu 3</div>
  </div>

  <div class="sidebar-submenu">
    <div class="sidebar-submenu">Data Config</div>
    <div class="sidebar-submenu">Data Setup</div>
    <div id="toggle-subChildmenu" class="sidebar-submenu">submenu 3</div>
  </div>

  <div class="sidebar-subChildmenu">
    <div class="sidebar-subChildmenu">Budget Period</div>
    <div class="sidebar-subChildmenu">Budget Date</div>
    <div class="sidebar-submsubChildmenuenu">subChildmenu 3</div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

uj5u.com熱心網友回復：

您可以向單擊處理程式添加其他檢查，例如確定專案是否具有類或子項 - 但在基本級別，最簡單的方法是停止通過父元素傳播。

jQuery(document).on('click', '.sidebar-subChildmenu', function(e){
  e.stopPropagation();
  jQuery(this).toggleClass('active');  
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/401869.html

標籤：html 查询 css

上一篇：是否可以從后端請求JavaScript代碼并在前端運行它？

下一篇：如何將主要元素放在標題上方和導航元素下方？