[筆記] jQuery Bootstrap 藉由 CSS 開關調整 Dropdown 的方式 @地瓜大的飛翔旅程

章節連結

程式碼
相關連結

jQuery 的 Bootstrap 是可以藉由 aria-expanded 和 toggleClass 方法來進行畫面的開關的。這邊筆記一下相關聯的 HTML 和 CSS 架構。

程式碼

<!--HTML-->
<div class="btn-group dropdown" role="group">
   <button type="button" id="targetBtn" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">
       <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
        something here                       
   </ul>
</div>

<!--JS 所謂的 dropdownElement 是 $('#targetBtn')-->
dropdownElement.attr("aria-expanded", false).parent().toggleClass("open") // 開啟
dropdownElement.attr("aria-expanded", true).parent().removeClass("open") // 關閉

</button>

something here

</ul>

</div>

dropdownElement.attr("aria-expanded", false).parent().toggleClass("open") // 開啟

dropdownElement.attr("aria-expanded", true).parent().removeClass("open") // 關閉

程式碼

相關連結

延伸閱讀