滑動切換無法通過其他功能使用

Question

我嘗試如下創建可折疊的導航。

我想要實現的是，當我展開導航（選擇類別）並選擇導航欄將向上滑動的類別之一時。 如您所見，在我選擇了一個類別之后，我想通過再次單擊選擇按鈕來更改它，它不想擴展/向下滑動。

我嘗試了所有我知道的方法，從slideUp / slideDown ， slideToggle, and I also tried changing .css（“ display”）！=“ none”） to .is（“ visible”））`毫無用處。

任何幫助表示贊賞！ :)

 $(document).ready(function() { }); $(".menu-list-collapsible").click(function() { $(this).siblings().slideToggle(); $(this).find("span i").toggleClass("rotate-collapsible"); }); $(".menu-list-collapsible-small").click(function() { mobileToggle(); $(".menu-list-selected-small").toggleClass("menu-list-selected-small-border"); }); function mobileToggle() { if ($(".menu-list-section").css("display") != "none") { $(".menu-list-section").slideUp(); } else { $(".menu-list-section").slideDown(); } } $(".menu-list-entry").click(function() { if ($(window).width() >= 767) { var tempMenuRem; $(".menu-list-entry").each(function(i) { tempMenuRem = $(this).text(); $(this).html("<span class='list-pointer'></span>" + tempMenuRem); $(this).removeClass("menu-list-selected"); }); var tempMenu = $(this).text(); $(this).addClass("menu-list-selected"); $(this).html("<span class='list-pointer'></span>" + tempMenu + "<span class='menu-list-entry-delete'><i class='fas fa-trash'></i></span>"); } else { var tempMenuRem = $(this).text(); $(".menu-list-selected-small").html("<span class='list-pointer'></span><span class='selected-name'>" + tempMenuRem + "<i class='fas fa-trash'></i></span><span class='menu-list-entry-delete'><span class='menu-list-collapsible-small'>Select Category<i class='fas fa-chevron-down'></i></span></span>"); mobileToggle(); $(".menu-list-selected-small").removeClass("menu-list-selected-small-border"); } }); 

 .dashed-wrapper-menu-list { padding: 0; } .menu-list-sidebar { width: calc(50% - 384px); height: 768px; background-color: #E7F7F0; padding: 32px 24px 24px 24px; border-right: solid 2px #008e5d; } .menu-list-title { font-weight: 700; color: #333; font-size: 17px; margin-bottom: 24px; cursor: pointer; } .menu-list-section li { height: 40px; line-height: 40px; color: #333; font-size: 13px; display: block; cursor: pointer; } .menu-list-section .menu-list-collapsible { text-transform: uppercase; color: #00c983; font-weight: 700; } .menu-list-entry-delete, .menu-list-title span, .menu-list-collapsible span { float: right; } .menu-list-collapsible span i { font-size: 11px; color: #aaa; } .menu-list-entry-delete i:hover, .menu-list-title span i:hover, .menu-list-collapsible span i:hover { color: #00c983; } .list-pointer { width: 10px; height: 10px; background-color: #00c983; display: inline-block; border-radius: 10px; margin-right: 16px; visibility: hidden; } .menu-list-selected { font-weight: 700; } .menu-list-selected span { visibility: visible; } .rotate-collapsible { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .menu-list-selected-small { display: none; font-size: 13px; padding-bottom: 24px; } .menu-list-selected-small .list-pointer { visibility: visible; } .menu-list-selected-small .fa-trash { margin-left: 8px; font-size: 11px; } .menu-list-selected-small .fa-chevron-down { margin-left: 8px; font-size: 11px; } .menu-list-collapsible-small { cursor: pointer; } .fa-trash:hover { color: #FF7979; } @media (min-width: 768px) and (max-width: 1199px) { .menu-list-sidebar { width: 176px; } } @media (max-width: 767px) { .menu-list-sidebar { width: 100%; height: 100%; border-bottom: solid 2px #008e5d; border-right: none; padding-bottom: 0; overflow-y: auto; } .menu-list-selected-small { display: block; } .menu-list-selected-small-border { border-bottom: solid 1px #ADCEC2; } .menu-list-section { display: none; } .menu-list-collapsible span i { display: none; } .menu-list-entry { display: block; } } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <div class="dashed-wrapper dashed-wrapper-menu-list"> <div class="menu-list-sidebar"> <div class="menu-list-title">Add Category<span><i class="fas fa-plus"></i></span></div> <div class="menu-list-selected-small"><span class="list-pointer"></span><span class="selected-name">Kacamata<i class="fas fa-trash"></i></span><span class="menu-list-entry-delete"><span class="menu-list-collapsible-small">Select Category<i class="fas fa-chevron-down"></i></span></span></div> <ul class="menu-list-section"> <li class="menu-list-collapsible">Medical<span><i class="fas fa-chevron-down"></i></span></li> <li class="menu-list-entry"><span class="list-pointer"></span>Kacamata</li> <li class="menu-list-entry"><span class="list-pointer"></span>Gigi</li> <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Inap</li> <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Jalan</li> </ul> <ul class="menu-list-section"> <li class="menu-list-collapsible">Travel<span><i class="fas fa-chevron-down"></i></span></li> <li class="menu-list-entry"><span class="list-pointer"></span>Transport</li> <li class="menu-list-entry"><span class="list-pointer"></span>Gasoline</li> <li class="menu-list-entry"><span class="list-pointer"></span>Travel</li> </ul> <ul class="menu-list-section"> <li class="menu-list-collapsible">Entertainment<span><i class="fas fa-chevron-down"></i></span></li> <li class="menu-list-entry"><span class="list-pointer"></span>Meal</li> </ul> <ul class="menu-list-section"> <li class="menu-list-collapsible">Others</li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

您過於復雜，並且很難做到。

要解決您的問題，您應該動態委派點擊，因為您無緣無故動態地重建按鈕（通過使用.html() ）！

因此，快速解決方案是將.on()方法與動態事件委托一起使用

$("staticParent").on("eventName", "dynamicChild", function() {

例：

 function mobileToggle() { if ($(".menu-list-section").css("display") !== "none") { $(".menu-list-section").slideUp(); } else { $(".menu-list-section").slideDown(); } } $(".dashed-wrapper-menu-list").on("click", ".menu-list-collapsible", function() { $(this).siblings().slideToggle(); $(this).find("span i").toggleClass("rotate-collapsible"); }); $(".dashed-wrapper-menu-list").on("click", ".menu-list-collapsible-small", function() { mobileToggle(); $(".menu-list-selected-small").toggleClass("menu-list-selected-small-border"); }); $(".dashed-wrapper-menu-list").on("click", ".menu-list-entry", function() { if ($(window).width() >= 767) { var tempMenuRem; $(".menu-list-entry").each(function(i) { tempMenuRem = $(this).text(); $(this).html("<span class='list-pointer'></span>" + tempMenuRem); $(this).removeClass("menu-list-selected"); }); var tempMenu = $(this).text(); $(this).addClass("menu-list-selected"); $(this).html("<span class='list-pointer'></span>" + tempMenu + "<span class='menu-list-entry-delete'><i class='fas fa-trash'></i></span>"); } else { var tempMenuRem = $(this).text(); $(".menu-list-selected-small").html("<span class='list-pointer'></span><span class='selected-name'>" + tempMenuRem + "<i class='fas fa-trash'></i></span><span class='menu-list-entry-delete'><span class='menu-list-collapsible-small'>Select Category<i class='fas fa-chevron-down'></i></span></span>"); mobileToggle(); $(".menu-list-selected-small").removeClass("menu-list-selected-small-border"); } }); 

 .dashed-wrapper-menu-list { padding: 0; } .menu-list-sidebar { width: calc(50% - 384px); height: 768px; background-color: #E7F7F0; padding: 32px 24px 24px 24px; border-right: solid 2px #008e5d; } .menu-list-title { font-weight: 700; color: #333; font-size: 17px; margin-bottom: 24px; cursor: pointer; } .menu-list-section li { height: 40px; line-height: 40px; color: #333; font-size: 13px; display: block; cursor: pointer; } .menu-list-section .menu-list-collapsible { text-transform: uppercase; color: #00c983; font-weight: 700; } .menu-list-entry-delete, .menu-list-title span, .menu-list-collapsible span { float: right; } .menu-list-collapsible span i { font-size: 11px; color: #aaa; } .menu-list-entry-delete i:hover, .menu-list-title span i:hover, .menu-list-collapsible span i:hover { color: #00c983; } .list-pointer { width: 10px; height: 10px; background-color: #00c983; display: inline-block; border-radius: 10px; margin-right: 16px; visibility: hidden; } .menu-list-selected { font-weight: 700; } .menu-list-selected span { visibility: visible; } .rotate-collapsible { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .menu-list-selected-small { display: none; font-size: 13px; padding-bottom: 24px; } .menu-list-selected-small .list-pointer { visibility: visible; } .menu-list-selected-small .fa-trash { margin-left: 8px; font-size: 11px; } .menu-list-selected-small .fa-chevron-down { margin-left: 8px; font-size: 11px; } .menu-list-collapsible-small { cursor: pointer; } .fa-trash:hover { color: #FF7979; } @media (min-width: 768px) and (max-width: 1199px) { .menu-list-sidebar { width: 176px; } } @media (max-width: 767px) { .menu-list-sidebar { width: 100%; height: 100%; border-bottom: solid 2px #008e5d; border-right: none; padding-bottom: 0; overflow-y: auto; } .menu-list-selected-small { display: block; } .menu-list-selected-small-border { border-bottom: solid 1px #ADCEC2; } .menu-list-section { display: none; } .menu-list-collapsible span i { display: none; } .menu-list-entry { display: block; } } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <div class="dashed-wrapper dashed-wrapper-menu-list"> <div class="menu-list-sidebar"> <div class="menu-list-title">Add Category<span><i class="fas fa-plus"></i></span></div> <div class="menu-list-selected-small"><span class="list-pointer"></span><span class="selected-name">Kacamata<i class="fas fa-trash"></i></span><span class="menu-list-entry-delete"><span class="menu-list-collapsible-small">Select Category<i class="fas fa-chevron-down"></i></span></span></div> <ul class="menu-list-section"> <li class="menu-list-collapsible">Medical<span><i class="fas fa-chevron-down"></i></span></li> <li class="menu-list-entry"><span class="list-pointer"></span>Kacamata</li> <li class="menu-list-entry"><span class="list-pointer"></span>Gigi</li> <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Inap</li> <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Jalan</li> </ul> <ul class="menu-list-section"> <li class="menu-list-collapsible">Travel<span><i class="fas fa-chevron-down"></i></span></li> <li class="menu-list-entry"><span class="list-pointer"></span>Transport</li> <li class="menu-list-entry"><span class="list-pointer"></span>Gasoline</li> <li class="menu-list-entry"><span class="list-pointer"></span>Travel</li> </ul> <ul class="menu-list-section"> <li class="menu-list-collapsible">Entertainment<span><i class="fas fa-chevron-down"></i></span></li> <li class="menu-list-entry"><span class="list-pointer"></span>Meal</li> </ul> <ul class="menu-list-section"> <li class="menu-list-collapsible">Others</li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

我的建議是

• 將所有.menu-list-section包裹到一個公共的父<div>和.slideToggle()中（而不是在每個單獨的UL元素上）。
• 將樣式化的<button type="button"> （出於語義原因）與描述性aria標簽一起使用，以實現可訪問性。
• 使用.toggleClass()並描述更改CSS中某些狀態的類，而不是使用JS
• 使用.text()更改元素文本（例如按鈕）-為了使元素保持靜態並始終存在於DOM中（而不是不必要地重建HTML）

另外，在查看您的需求之后，我認為每行上都沒有多個Select Category是沒有道理的。
如果僅通過單擊+按鈕打開下拉列表，就會這樣。

Answer 2

 var itm = document.querySelectorAll(".itm"); itm.forEach(function(el){ el.onclick = function(e){ sum.click(); sum.innerHTML = e.target.innerHTML; } }) 

 ol li , ul li{ list-style: none; list-style-type: none; } 

 for alternative dropdown may u us <details> <summary id="sum">obat setres</summary> <ul> <li><a class="itm" href="#">panadol</a></li> <li><a class="itm" href="#">mi goreng</a></li> <li><a class="itm" href="#">es kepal</a></li> <li><a class="itm" href="#">cewek</a></li> </ul> </details>