раскрывающееся меню боковой панели по умолчанию раскрывается при загрузке страницы - PullRequest
Новая
       1

раскрывающееся меню боковой панели по умолчанию раскрывается при загрузке страницы

0 голосов
/ 11 июля 2020

У меня есть нестандартный html / css / js Я работал над: 

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

Я пытаюсь сделать так, чтобы раскрывающийся список «контакт» открывался по умолчанию при загрузке страницы, я знаю, что это довольно просто вещь, но я пока не получил ее, я попытался установить aria-expand = 'true' по умолчанию и добавить 'open' в строку класса для элемента <li>, но не повезло. Может ли кто-нибудь помочь мне с этой очень простой задачей?

1 Ответ

0 голосов
/ 11 июля 2020

Просто добавьте класс 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...