页面加载时默认展开侧边栏下拉菜单

Question

我有一些我一直在处理的自定义 html/css/js：

$(document).ready(function() {

  $('#sidebarCollapse').on('click', function() {

    $('#sidebar').toggleClass('active');

  });

});

<!-- jQuery CDN - Slim version (=without AJAX) -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- Popper.JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

<!-- Bootstrap JS -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!-- bootstrap css-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- jQuery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Page Content -->

<div class="wrapper" class="toggled">

  <!-- Sidebar  -->

  <nav id="sidebar">

    <div class="sidebar-header">

      <h3>Website Title</h3> <button id='sidebutton'>M</button>

    </div>

    <ul class="list-unstyled components">

      <li class="currentPage">

        <a href="#">Home</a>

      </li>

      <li>

        <a href="#">About</a>

      </li>

      <li>

        <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Contact</a>

        <ul class="collapse list-unstyled" id="contactSubmenu">

          <li>

            <a href="#">Email</a>

          </li>

          <li>

            <a href="#">Github</a>

          </li>

我试图在加载页面时默认打开“联系人”下拉菜单，我知道这是一件非常简单的事情，但到目前为止我还没有让它工作，我试图设置 aria-默认情况下 expand='true' 并将 'open' 添加到<li>元素的类字符串中，但没有运气。有人可以帮我完成这个非常简单的任务吗？

Answer 1

只需将show类添加到<ul>联系人下拉列表中$(document).ready(function() {&nbsp; $('#sidebarCollapse').on('click', function() {&nbsp; &nbsp; $('#sidebar').toggleClass('active');&nbsp; });});@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";body {&nbsp; font-family: 'Poppins', sans-serif;&nbsp; background: #ffffff;}p {&nbsp; font-family: 'Poppins', sans-serif;&nbsp; font-size: 1.1em;&nbsp; font-weight: 300;&nbsp; line-height: 1.7em;&nbsp; color: #999;}.btn-info {&nbsp; color: #fff;&nbsp; background-color: #b81717;&nbsp; border-color: #52b817;}a,a:hover,a:focus {&nbsp; color: inherit;&nbsp; text-decoration: none;&nbsp; transition: all 0.3s;}.navbar {&nbsp; padding: 15px 10px;&nbsp; background: #fff;&nbsp; border: none;&nbsp; border-radius: 0;&nbsp; margin-bottom: 40px;&nbsp; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);}.navbar-btn {&nbsp; box-shadow: none;&nbsp; outline: none !important;&nbsp; border: none;}.line {&nbsp; width: 100%;&nbsp; height: 1px;&nbsp; border-bottom: 1px dashed #ddd;&nbsp; margin: 40px 0;}/* ---------------------------------------------------&nbsp; &nbsp; &nbsp; &nbsp; SIDEBAR STYLE&nbsp; &nbsp; ----------------------------------------------------- */.wrapper {&nbsp; display: flex;&nbsp; width: 100%;&nbsp; align-items: stretch;}#sidebar {&nbsp; min-width: 250px;&nbsp; max-width: 250px;&nbsp; background: #f7f9fb;&nbsp; /* NAVBAR BACKGROUND */&nbsp; color: rgb(0, 0, 0);&nbsp; transition: all 0.3s;}#sidebar.active {&nbsp; margin-left: -250px;}#sidebar .sidebar-header {&nbsp; padding: 20px;&nbsp; /* background: #6d7fcc; */}#sidebar ul.components {&nbsp; /* padding: 20px 0; */&nbsp; /* border-bottom: 1px solid #47748b; */}#sidebar ul p {&nbsp; color: #fff;&nbsp; padding: 10px;}#sidebar ul li a {&nbsp; padding: 10px;&nbsp; font-size: 1.1em;&nbsp; display: block;}.currentPage,.currentPage * {&nbsp; background: #bed6b8 !important;}#sidebar ul li a:hover {&nbsp; color: #000;&nbsp; background: #8FC1E3;&nbsp; /* hover tab color */}#sidebar ul li.active>a,a[aria-expanded="true"] {&nbsp; /* color: #fff; */&nbsp; background: #f7f9fb;&nbsp; /* active tab */}a[data-toggle="collapse"] {&nbsp; position: relative;}.dropdown-toggle::after {&nbsp; display: block;&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; right: 20px;&nbsp; transform: translateY(-50%);}ul ul a {&nbsp; font-size: 0.9em !important;&nbsp; padding-left: 30px !important;&nbsp; background: #f7f9fb;&nbsp; /* tab list color */}ul.CTAs {&nbsp; padding: 20px;}ul.CTAs a {&nbsp; text-align: center;&nbsp; font-size: 0.9em !important;&nbsp; display: block;&nbsp; border-radius: 5px;&nbsp; margin-bottom: 5px;}/* ---------------------------------------------------&nbsp; &nbsp; &nbsp; &nbsp; CONTENT STYLE&nbsp; &nbsp; ----------------------------------------------------- */#content {&nbsp; width: 100%;&nbsp; padding: 20px;&nbsp; min-height: 100vh;&nbsp; transition: all 0.3s;}/* ---------------------------------------------------&nbsp; &nbsp; &nbsp; &nbsp; MEDIAQUERIES&nbsp; &nbsp; ----------------------------------------------------- */@media (max-width: 768px) {&nbsp; #sidebar {&nbsp; &nbsp; margin-left: -250px;&nbsp; }&nbsp; #sidebar.active {&nbsp; &nbsp; margin-left: 0;&nbsp; }&nbsp; #sidebarCollapse span {&nbsp; &nbsp; color: pink display: inline;&nbsp; }}/* Sidebar expand/collapse button */#sidebutton {&nbsp; margin-left: 100%;&nbsp; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .3);&nbsp; border: none;&nbsp; height: 40px;&nbsp; width: 40px;&nbsp; border-radius: 50%;&nbsp; cursor: pointer;}<!-- jQuery CDN - Slim version (=without AJAX) --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><!-- Popper.JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script><!-- Bootstrap JS --><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script><!-- bootstrap css--><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!-- Page Content --><div class="wrapper" class="toggled">&nbsp; <!-- Sidebar&nbsp; -->&nbsp; <nav id="sidebar">&nbsp; &nbsp; <div class="sidebar-header">&nbsp; &nbsp; &nbsp; <h3>Website Title</h3> <button id='sidebutton'>M</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <ul class="list-unstyled components">&nbsp; &nbsp; &nbsp; <li class="currentPage">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Home</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">About</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Contact</a>&nbsp; &nbsp; &nbsp; &nbsp; <ul class="collapse list-unstyled show" id="contactSubmenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Email</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Github</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">LinkedIn</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Resume</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </nav></div>