Bug using :Hover and click on Chrome

Asked

Viewed 230 times

1

I’m fixing an issue that I was able to simulate only on Chrome. After clicking several times on the items, the menu closes for no reason. Follow the code: (I could not paste formatted because it exceeds the character limit of the question)

<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
   </head>
   <body>
      <aside class="aside">
         <div class="nav-primary nav-toggle d-none d-md-inline"> <span class="item-text"><i class="fa fa-bars"></i> </span> </div>
         <nav id="" class="sidebar">
            <ul id="menu-itens" class="nav">
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-address-card"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-boxes"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fas fa-user-tie"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-university"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false" style="">
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-object-ungroup"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-handshake"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse show" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false">
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck-loading"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-shopping-cart"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-wrench"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="far fa-shopping-basket"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-users"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-box-full"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li> 
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-cubes"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-money-check-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-university"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
            </ul>
         </nav>
      </aside>
<script>
var jDocument = $(document);
var navToggle = $('.nav-toggle');
var sidebarToggle = $('.sidebar-toggle');
var sidebar = $('.sidebar');
var collapseSelector = '[data-toggle="collapse-next"]',
colllapsibles = $('.sidebar .collapse').collapse({ toggle: false }),
toggledClass = 'aside-collapsed',
$body = $('body'),
phone_mq = 768;

function notify(a, b, c) {
   console.log(b)
}

var fixedSidebar = $('.fixed-sidebar');
var fixedMenu = 0;

fixedSidebar.off("click").on('click', function (e) {
   e.preventDefault();
   var date = new Date();
   date.setTime(date.getTime() + (1000 * 24 * 60 * 60 * 1000));
   if (fixedMenu == 0) {
      fixedMenu = 1;
      sidebar.addClass('fixo');
      notify("", "Menu fixo!", "success");
   } else {
      fixedMenu = 0;
      sidebar.removeClass('fixo');
      notify("", "Menu dinâmico!", "success");
   }
   SetCookie("fixedMenu", fixedMenu, date);
});

sidebarToggle.off("click").on("click", function () {
   sidebar.toggleClass('toggled');
});

jDocument.on('click.sidebar', collapseSelector, function (e) {
   var $that = $(this);
   setTimeout(function () {
      var $target = $that.siblings('ul');
      var $targetParent = $target.parent().parent();
      if ($targetParent.has("ul").hasClass("show") == true) {
         colllapsibles.not($targetParent).collapse('hide');
      } else {
         colllapsibles.collapse('hide');
      }
      $target.collapse('show');
   }, 1);
});
</script>
      <style> .aside:hover .sidebar { left: 0; }   .aside .sidebar { display: block; left: -255px; transition: left .6s ease; }    .aside { position: absolute; margin-top: 0px; top: 0; left: 0; bottom: 0; z-index: 1031; }  .aside .nav-primary { width: 30px; position: fixed; background-color: #39a7df; /*#fafafa;*/ color: #ffffff; display: block; height: calc(100% - 29px); border-right: 1px solid #39a7df; z-index: 1; }  .aside .nav-primary>.item-text { color: #ffffff; font-size: 20px; font-weight: 100; display: block; margin: 0px 8px; /*@include rotate(-90,3);*/ }  .aside .nav-primary .item-text i { font-size: 16px; }  .aside .sidebar { position: fixed; top: 0; background-color: #39a7df; height: calc(100% - 29px); overflow-y: auto; border-right: 1px solid #39a7df; -webkit-overflow-scrolling: touch; width: 250px; z-index: 2; }  .sidebar>.nav { position: relative; margin-top: 5px; }  .sidebar>.nav>.nav-heading:first-child { padding-top: 0px; }    .sidebar .nav-heading:hover { background-color: #39a7df !important; color: #ffffff !important; }  .sidebar .nav-labels { list-style-type: none; padding: 0; margin: 0; }  .sidebar .nav-labels>.nav-labels-item { padding: 5px 25px; font-size: 13px; }  .sidebar .nav-labels>.nav-labels-item>a { color: #ffffff; }  .sidebar .nav-labels>.nav-labels-item .circle { margin-right: 20px; margin-left: 0; }  .sidebar .nav>li { border-left: 2px solid transparent; display: block; width: 100%; }  .sidebar .nav>li>a, .sidebar .nav>li>.nav-item { padding: 12px 5px 12px 10px; color: #ffffff; letter-spacing: .025em; /*font-weight: 600;*/ -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; transition: background-color 0.2s ease; display: block; text-decoration: none; }  .sidebar .nav>li>a:focus, .sidebar .nav>li>.nav-item:focus { color: #fff; background-color: #45AC6C; }  .sidebar .nav>li>a>em, .sidebar .nav>li>.nav-item>em { width: 1.5em; color: #ffffff; }  .sidebar .nav>li.active  /*.sidebar .nav > li.active > a,*/ /*.sidebar .nav > li.active > a > .item-text*/ /*.sidebar .nav > li.active .nav,*/ { background-color: #45AC6C; color: #fff; }  .sidebar .nav>li:hover, .sidebar .nav>li:hover>a, .sidebar .nav>li:hover>a>.item-text .sidebar .nav>li:hover .nav { background-color: #C1332F; color: #fff; }  .sidebar .nav>li.active>a>em, .sidebar .nav>li:hover>a>em { color: #ffffff; }  .sidebar .nav>li.active { border-left-color: #39a7df; }  .sidebar .nav .nav { padding-left: 25px; background-color: #39a7df; }  .sidebar .nav .nav>li { border-left: 0; }  .sidebar .nav .nav>li>a, .sidebar .nav .nav>li>.nav-item { display: block; position: relative; padding: 10px 2px 10px 6px; background-color: transparent !important; font-weight: normal; }  .sidebar .nav .nav>li>a:focus, .sidebar .nav .nav>li>.nav-item:focus, .sidebar .nav .nav>li>a:hover, .sidebar .nav .nav>li>.nav-item:hover { color: #fff; }  .sidebar .nav .nav>li.active>a, .sidebar .nav .nav>li.active>.nav-item { color: #fff; }  .sidebar .nav .nav>li.active>a:after, .sidebar .nav .nav>li.active>.nav-item:after { border-color: #1c75bf; background-color: #1c75bf; } </style>
   </body>
</html>

I could not simulate this problem in Firefox. The problem occurs after clicking several times opening or closing the root elements.

You could tell me how to fix this problem?

Follows the simulation: https://youtu.be/J6pinvC7-Q4

javascript css google-chrome

  • I couldn’t reproduce the problem here - and I tried to click wildly through the menu.

  • PS: have to leave the mouse stopped after clicking, the video shows better how to play.

  • Try simulating your code in Codepen. I think it would be relevant. Your code is inline, it becomes difficult to read and understand the routine for those who access the platform, and beats the eye.

1 answer

2


Use the method .hover() jQuery by switching a class that determines when the menu is open or closed. When adding the class with .hover() at the event mouseenter the menu will open in the event mouseleave, class will be removed and the menu will close. Another event click will change the value of a control variable (estado) to prevent the menu from closing in a short period of time determined by setTimeout.

The problem is that when you click on a menu item, the aside may lose the hover (event that calls the mouseleave), which is the condition for it to stay open. By controlling by jQuery you avoid, by mouseleave, the class that keeps the menu open is removed.

Change the first two CSS styles to:

.aside .sidebar.ativo {
   left: 0;
}

.aside .sidebar {
   display: block;
   left: -255px;
   transition: left .6s ease;
}

And add the jQuery code in the script:

var estado;

$(".aside").hover(
   function(){
      $(".sidebar", this).addClass("ativo");
   },
   function(){
      if(!estado){
         $(".sidebar", this).removeClass("ativo");
      }
   }
).on("click", function(){
   estado = true;
   setTimeout(function(){
      estado = false;
   }, 50);
});

Operation (run in full screen):

var jDocument = $(document);
var navToggle = $('.nav-toggle');
var sidebarToggle = $('.sidebar-toggle');
var sidebar = $('.sidebar');
var collapseSelector = '[data-toggle="collapse-next"]',
colllapsibles = $('.sidebar .collapse').collapse({ toggle: false }),
toggledClass = 'aside-collapsed',
$body = $('body'),
phone_mq = 768;

function notify(a, b, c) {
   console.log(b)
}

var fixedSidebar = $('.fixed-sidebar');
var fixedMenu = 0;

fixedSidebar.off("click").on('click', function (e) {
   e.preventDefault();
   var date = new Date();
   date.setTime(date.getTime() + (1000 * 24 * 60 * 60 * 1000));
   if (fixedMenu == 0) {
      fixedMenu = 1;
      sidebar.addClass('fixo');
      notify("", "Menu fixo!", "success");
   } else {
      fixedMenu = 0;
      sidebar.removeClass('fixo');
      notify("", "Menu dinâmico!", "success");
   }
   SetCookie("fixedMenu", fixedMenu, date);
});

sidebarToggle.off("click").on("click", function () {
   sidebar.toggleClass('toggled');
});

jDocument.on('click.sidebar', collapseSelector, function (e) {
   var $that = $(this);
   setTimeout(function () {
      var $target = $that.siblings('ul');
      var $targetParent = $target.parent().parent();
      if ($targetParent.has("ul").hasClass("show") == true) {
         colllapsibles.not($targetParent).collapse('hide');
      } else {
         colllapsibles.collapse('hide');
      }
      $target.collapse('show');
   }, 1);
});

var estado;

$(".aside").hover(
   function(){
      $(".sidebar", this).addClass("ativo");
   },
   function(){
      if(!estado){
         $(".sidebar", this).removeClass("ativo");
      }
   }
).on("click", function(){
   estado = true;
   setTimeout(function(){
      estado = false;
   }, 50);
});
.aside .sidebar.ativo {
   left: 0;
}

.aside .sidebar {
   display: block;
   left: -255px;
   transition: left .6s ease;
}

.aside { position: absolute; margin-top: 0px; top: 0; left: 0; bottom: 0; z-index: 1031; }

.aside .nav-primary { width: 30px; position: fixed; background-color: #39a7df; /*#fafafa;*/ color: #ffffff; display: block; height: calc(100% - 29px); border-right: 1px solid #39a7df; z-index: 1; }

.aside .nav-primary>.item-text { color: #ffffff; font-size: 20px; font-weight: 100; display: block; margin: 0px 8px; /*@include rotate(-90,3);*/ }

.aside .nav-primary .item-text i { font-size: 16px; }

.aside .sidebar { position: fixed; top: 0; background-color: #39a7df; height: calc(100% - 29px); overflow-y: auto; border-right: 1px solid #39a7df; -webkit-overflow-scrolling: touch; width: 250px; z-index: 2; }

.sidebar>.nav { position: relative; margin-top: 5px; }

.sidebar>.nav>.nav-heading:first-child { padding-top: 0px; }

.sidebar .nav-heading:hover { background-color: #39a7df !important; color: #ffffff !important; }

.sidebar .nav-labels { list-style-type: none; padding: 0; margin: 0; }

.sidebar .nav-labels>.nav-labels-item { padding: 5px 25px; font-size: 13px; }

.sidebar .nav-labels>.nav-labels-item>a { color: #ffffff; }

.sidebar .nav-labels>.nav-labels-item .circle { margin-right: 20px; margin-left: 0; }

.sidebar .nav>li { border-left: 2px solid transparent; display: block; width: 100%; }

.sidebar .nav>li>a, .sidebar .nav>li>.nav-item { padding: 12px 5px 12px 10px; color: #ffffff; letter-spacing: .025em; /*font-weight: 600;*/ -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; transition: background-color 0.2s ease; display: block; text-decoration: none; }

.sidebar .nav>li>a:focus, .sidebar .nav>li>.nav-item:focus { color: #fff; background-color: #45AC6C; }

.sidebar .nav>li>a>em, .sidebar .nav>li>.nav-item>em { width: 1.5em; color: #ffffff; }

.sidebar .nav>li.active  /*.sidebar .nav > li.active > a,*/ /*.sidebar .nav > li.active > a > .item-text*/ /*.sidebar .nav > li.active .nav,*/ { background-color: #45AC6C; color: #fff; }

.sidebar .nav>li:hover, .sidebar .nav>li:hover>a, .sidebar .nav>li:hover>a>.item-text .sidebar .nav>li:hover .nav { background-color: #C1332F; color: #fff; }

.sidebar .nav>li.active>a>em, .sidebar .nav>li:hover>a>em { color: #ffffff; }

.sidebar .nav>li.active { border-left-color: #39a7df; }

.sidebar .nav .nav { padding-left: 25px; background-color: #39a7df; }

.sidebar .nav .nav>li { border-left: 0; }

.sidebar .nav .nav>li>a, .sidebar .nav .nav>li>.nav-item { display: block; position: relative; padding: 10px 2px 10px 6px; background-color: transparent !important; font-weight: normal; }

.sidebar .nav .nav>li>a:focus, .sidebar .nav .nav>li>.nav-item:focus, .sidebar .nav .nav>li>a:hover, .sidebar .nav .nav>li>.nav-item:hover { color: #fff; }

.sidebar .nav .nav>li.active>a, .sidebar .nav .nav>li.active>.nav-item { color: #fff; }

.sidebar .nav .nav>li.active>a:after, .sidebar .nav .nav>li.active>.nav-item:after { border-color: #1c75bf; background-color: #1c75bf; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<aside class="aside">
         <div class="nav-primary nav-toggle d-none d-md-inline"> <span class="item-text"><i class="fa fa-bars"></i> </span> </div>
         <nav id="" class="sidebar">
            <ul id="menu-itens" class="nav">
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-address-card"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-boxes"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fas fa-user-tie"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-university"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false" style="">
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-object-ungroup"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-handshake"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse show" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false">
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck-loading"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-shopping-cart"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-wrench"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="far fa-shopping-basket"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-users"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-box-full"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li> 
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-cubes"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-money-check-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-university"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
            </ul>
         </nav>
      </aside>

  • Good morning, I managed to simulate the problem with this code, greatly reduced the occurrences but still happens. I would not like to use an alternative solution like Jquery, I would like to use the default browser features.

  • Currently to get around the problem I used a code very similar to this, and is working well

Browser other questions tagged javascript css google-chrome

You are not signed in. Login or sign up in order to post.