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

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() {

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

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

  });

});

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body {

  font-family: 'Poppins', sans-serif;

  background: #ffffff;

}

p {

  font-family: 'Poppins', sans-serif;

  font-size: 1.1em;

  font-weight: 300;

  line-height: 1.7em;

  color: #999;

}

.btn-info {

  color: #fff;

  background-color: #b81717;

  border-color: #52b817;

}

a,

a:hover,

a:focus {

  color: inherit;

  text-decoration: none;

  transition: all 0.3s;

}

.navbar {

  padding: 15px 10px;

  background: #fff;

  border: none;

  border-radius: 0;

  margin-bottom: 40px;

  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

}

.navbar-btn {

  box-shadow: none;

  outline: none !important;

  border: none;

}

.line {

  width: 100%;

  height: 1px;

  border-bottom: 1px dashed #ddd;

  margin: 40px 0;

}

/* ---------------------------------------------------

        SIDEBAR STYLE

    ----------------------------------------------------- */

.wrapper {

  display: flex;

  width: 100%;

  align-items: stretch;

}

#sidebar {

  min-width: 250px;

  max-width: 250px;

  background: #f7f9fb;

  /* NAVBAR BACKGROUND */

  color: rgb(0, 0, 0);

  transition: all 0.3s;

}

#sidebar.active {

  margin-left: -250px;

}

#sidebar .sidebar-header {

  padding: 20px;

  /* background: #6d7fcc; */

}

#sidebar ul.components {

  /* padding: 20px 0; */

  /* border-bottom: 1px solid #47748b; */

}

#sidebar ul p {

  color: #fff;

  padding: 10px;

}

#sidebar ul li a {

  padding: 10px;

  font-size: 1.1em;

  display: block;

}

.currentPage,

.currentPage * {

  background: #bed6b8 !important;

}

#sidebar ul li a:hover {

  color: #000;

  background: #8FC1E3;

  /* hover tab color */

}

#sidebar ul li.active>a,

a[aria-expanded="true"] {

  /* color: #fff; */

  background: #f7f9fb;

  /* active tab */

}

a[data-toggle="collapse"] {

  position: relative;

}

.dropdown-toggle::after {

  display: block;

  position: absolute;

  top: 50%;

  right: 20px;

  transform: translateY(-50%);

}

ul ul a {

  font-size: 0.9em !important;

  padding-left: 30px !important;

  background: #f7f9fb;

  /* tab list color */

}

ul.CTAs {

  padding: 20px;

}

ul.CTAs a {

  text-align: center;

  font-size: 0.9em !important;

  display: block;

  border-radius: 5px;

  margin-bottom: 5px;

}

/* ---------------------------------------------------

        CONTENT STYLE

    ----------------------------------------------------- */

#content {

  width: 100%;

  padding: 20px;

  min-height: 100vh;

  transition: all 0.3s;

}

/* ---------------------------------------------------

        MEDIAQUERIES

    ----------------------------------------------------- */

@media (max-width: 768px) {

  #sidebar {

    margin-left: -250px;

  }

  #sidebar.active {

    margin-left: 0;

  }

  #sidebarCollapse span {

    color: pink display: inline;

  }

}

/* Sidebar expand/collapse button */

#sidebutton {

  margin-left: 100%;

  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .3);

  border: none;

  height: 40px;

  width: 40px;

  border-radius: 50%;

  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">

  <!-- 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 show" id="contactSubmenu">

          <li>

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

          </li>

          <li>

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

          </li>

          <li>

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

          </li>

          <li>

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

          </li>

        </ul>

      </li>

    </ul>

  </nav>

</div>