页面加载时默认展开侧边栏下拉菜单
我有一些我一直在处理的自定义 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>元素的类字符串中，但没有运气。有人可以帮我完成这个非常简单的任务吗？
人到中年有点甜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>
随时随地看视频慕课网APP
相关分类
JavaScript