Как с hover переписать на клик?

Question

[Heorhii]

Есть у меня некий сайдбар, при наведении на который он вылазит полностью. Хочу сделать чтобы вылазил при клике на кнопку (не на самом сайдбаре), прописал через js toggle, она работает но сайдбар появляется на долю секунд после чего тут же прячется. Подскажите пожалуйста где осекся

.no-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.no-list li {
  padding: 0;
  margin: 0;
}
.no-list li a {
  padding: 0;
  margin: 0;
  display: block;
}
aside.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  background: #333;
  width: 50px;
  overflow: hidden;
    z-index: 1021;
  transition: all 0.5s;
}
aside.sidebar:hover {
  width: 200px;
}
aside.sidebar:hover ul.sb_top_lv li span {
  left: 50px;
  transition-delay: .318s;
  opacity: 1;
}
aside.sidebar ul.sb_top_lv {
  float: left;
  width: 100%;
}
aside.sidebar ul.sb_top_lv li {
  float: center;
  width: 100%;
  color: white;
  position: relative;
  padding: 10px 15px;
  text-align: left;
  transition: all 0.5s;
}
.active-bar {
  background-color: #ff900e;
}
aside.sidebar ul.sb_top_lv li:hover {
  cursor: pointer;
  background: #222;
}
aside.sidebar ul.sb_top_lv li.opened ul.sb_dropdown {
  height: 500px;
  opacity: 1;
  left: 0;
}
aside.sidebar ul.sb_top_lv li span {
  transition: all 0.2s;
  position: absolute;
  left: 60px;
  font-size: 12px;
  top: 12px;
  opacity: 0;
}
aside.sidebar ul.sb_top_lv li i {
  font-size: 18px;
}
aside.sidebar ul.sb_dropdown {
  transition: all 0.5s;
  position: relative;
  opacity: 0;
  top: 0;
  height: 0px;
  overflow: hidden;
  width: 200px;
  left: 25px;
}
aside.sidebar ul.sb_dropdown p {
  text-align: center;
}
aside.sidebar ul.sb_dropdown li a {
  color: white;
  font-size: 12px;
}
aside.sidebar ul.sb_dropdown li:hover {
  background-color: #111;
}
aside.sidebar ul.sb_dropdown li a:before {
  padding-right: 5px;
}

Ну и джс кнопки на всяк..

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('.sidebar').toggleClass('active');
    });
});

Comments

[mad_nikk]

можно html?

[Heorhii]

s0prano,

<aside class="sidebar">
  <ul class="no-list sb_top_lv">
    <li class="active-bar">
        <i class="fas fa-tachometer-alt"></i><span>Dashboard</span>
    </li>
    <li><i class="fas fa-users"></i><span>Marketing</span>
      <ul class="no-list sb_dropdown clearfix">
        <li><a>Leads</a></li>
        <li><a>Contacts</a></li>
        <li><a>EmiTwilio</a></li>
        <li><a>EmiMagna</a></li>
        <li><a>EmiElastic</a></li>
      </ul>
    </li>
    <li><i class="far fa-dot-circle"></i><span>Sales</span>
      <ul class="no-list sb_dropdown clearfix">
        <li><a>Products</a></li>
        <li><a>Contacts</a></li>
      </ul>
    </li>
    <li><i class="fas fa-boxes"></i><span>Inventory</span>
      <ul class="no-list sb_dropdown clearfix">
        <li><a>Sales Orders</a></li>
        <li><a>Products</a></li>
        <li><a>Contacts</a></li>
      </ul>
    </li>
    <li><i class="far fa-chart-bar"></i><span>VTE Reports</span></li>
    <li><i class="fas fa-at"></i><span>Mail Manager</span></li>
    <li><i class="fas fa-shopping-cart"></i><span>Extension Store</span></li>
    <li><i class="far fa-envelope"></i><span>Email Templates</span></li>
    <li><i class="fas fa-cog"></i><span>Settings</span>
      <ul class="no-list sb_dropdown clearfix">
        <li><a>CRM Settings</a></li>
        <li><a>Manage Users</a></li>
      </ul>
    </li>
  </ul>
</aside>

Answer 1

[Матвей Феникс]

Вот это место:

aside.sidebar:hover {
  width: 200px;
}

В том классе, который добавляешь jquery, есть что-то подобное? Ибо я его не вижу в коде, чтобы с классом active что-то навешивалось на sidebar.

Comments

[Heorhii]

:hover менял на .active и получил вышеописанный эффект

[Матвей Феникс]

Георгий Городенко, щас проверю)

[Матвей Феникс]

Георгий Городенко, пользуйся) https://codepen.io/matvey-phoen1x/pen/KeGZVx
Событие было навешано не на тот селектор

[Heorhii]

Матвей Феникс, Как ты это сделал?)

[Матвей Феникс]

Георгий Городенко, посмотри на свой код, в jquery, событие клик было не на том селекторе, не на кнопке

[Heorhii]

Матвей Феникс, просто изначально я хотел открывать кнопкой которая не относится к сайдбару. Но твой вариант мне понравился больше. Спасибо!

[Матвей Феникс]

Георгий Городенко, не за что)

[Heorhii]

Матвей Феникс, а можно еще вопросик сюда же?
а как можно свернуть этот бар до первоначального состояния, если кликнуть вне этого элемента?

[Матвей Феникс]

@deasmon, через пару часов буду у компа, напишу. Ну или попробуй навесить событие на тот класс в котором лежит выезжающая плашка и кнопка, с условием. Клик => если у дочернего элемента есть класс active - убираем это класс с него, как-то так.

[Heorhii]

Матвей Феникс, Все, спасибо, я уже и сам разобрался

Answer 2

[BarryHAllen]

Везде
aside.sidebar:hover заменить на aside.sidebar.active
если я правильно понял вопрос, конечно

Comments

[Heorhii]

Я так и сделал сначала, получил то о чем написал

[BarryHAllen]

@deasmont
https://codepen.io/anon/pen/mKzBPj
все работает
проблема в другом куске кода - какая-то функция убирает класс 'active'