Блог

Главная - Вопросы по программированию - Как сделать выпадающее меню автоматически закрывающимся при наведении курсора мыши в любое другое место

Как сделать выпадающее меню автоматически закрывающимся при наведении курсора мыши в любое другое место

#javascript #html #css #blogger

Вопрос:

У меня есть веб-сайт, в который встроено вертикальное меню на левой боковой панели

Я обнаружил одну проблему, заключающуюся в том, что, когда я нажимаю любое выпадающее меню и наведу курсор мыши на любую другую часть веб-сайта, выпадающее меню не закрывается автоматически

Код :

 <style>



.widget ul {
    padding: 0 !important;
}

#sidebar-left-1 .widget-content nav {
    width: unset !important;
}

#sidebar-left-1 {
    margin: 0 !important;
}

    body {
        background-color: #fff;
        font-size: 14px;
    }
      
     nav {
        position: relative;
        width: 180px;
    }
    
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    nav ul li {
      /* Sub Menu */
    }
    nav ul li a {
        display: block;
        background: #ebebeb;
        padding: 10px 15px;
        color: #333;
        text-decoration: none;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -ms-transition: 0.2s linear;
        -o-transition: 0.2s linear;
        transition: 0.2s linear;
    }
    nav ul li a:hover {
        background: #f8f8f8;
        color: #515151;
    }
    nav ul li a .fa {
        width: 16px;
        text-align: center;
        margin-right: 5px;
        float:right;
    }
    nav ul ul {
        background-color:#ebebeb;
    }
    nav ul li ul li a {
        background: #f8f8f8;
        border-left: 4px solid transparent;
        padding: 10px 20px;
    }
    nav ul li ul li a:hover {
        background: #ebebeb;
        border-left: 4px solid #3498db;
    }
    
    
    
    
    </style>
    
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <nav class='animated bounceInDown'>
        <ul>
            <li><a href='#profile'>Profile</a></li>
            <li><a href='#message'>Messages</a></li>
            <li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a>
                <ul>
                    <li><a href='#settings'>Account</a></li>
                    <li><a href='#settings'>Profile</a></li>
                
                </ul>
            </li>
        
            <li class='sub-menu'><a href='#Somethin'>Something<div class='fa fa-caret-down right'></div></a>
                <ul>
                    <li><a href='#settings'>Account</a></li>
                    <li><a href='#settings'>Profile</a></li>
                
                </ul>
            </li>
        
        
            <li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
                <ul>
                    <li><a href='#settings'>FAQ's</a></li>
                    <li><a href='#settings'>Submit a Ticket</a></li>
                    <li><a href='#settings'>Network Status</a></li>
                </ul>
            </li>
        
        </ul>
      
    </nav>
    
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    <script>
    
    
    
    $('.sub-menu ul').hide();
    $(".sub-menu a").click(function () {
        $(this).parent(".sub-menu").children("ul").slideToggle("100");
        $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    });
    
    </script>

Ниже приведен веб-сайт, в который я встроил вышеупомянутое вертикальное меню : https://codemyquestion.blogspot.com/

Комментарии:

1. Вы также можете использовать YourElement.addEventListener('blur', (e) => { YourElement.classList.remove('active'); }); . Преобразуйте его в jQuery, в котором я так давно не использовал jQuery.

Ответ №1:

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Вы можете проверить это для вашего подтверждения: —
кликните сюда

Комментарии:

1. P.S. Не могли бы вы немного объяснить это по-английски? (Я новичок и не очень понимаю, что произошло.)

2. @pr0grammar Вы можете проверить полное объяснение здесь. я думаю, ты лучше понимаешь, что происходит.. кликните сюда

Ответ №2:

 const toggleSubMenuItem = menuItem => {
    $(menuItem).parent(".sub-menu").children("ul").slideToggle("100");
    $(menuItem).find(".right").toggleClass("fa-caret-up fa-caret-down");
}

const hideSubMenuItems = menuItem => {
    $("nav>ul>li>ul").each((i, el) => {
        $(el).hide("100")
    })
    $("nav>ul>li .fa-caret-up").toggleClass("fa-caret-up fa-caret-down")
}
$('.sub-menu ul').hide();

$(".sub-menu a").click(function(e) {
    e.stopImmediatePropagation()
    toggleSubMenuItem(this)
})

$("nav").hover(e => {}, e => {
    e.stopImmediatePropagation()
    hideSubMenuItems()
}) 
 .widget ul {
    padding: 0 !important;
}

#sidebar-left-1 .widget-content nav {
    width: unset !important;
}

#sidebar-left-1 {
    margin: 0 !important;
}

body {
    background-color: #fff;
    font-size: 14px;
}

nav {
    position: relative;
    width: 180px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    /* Sub Menu */
}

nav ul li a {
    display: block;
    background: #ebebeb;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}

nav ul li a:hover {
    background: #f8f8f8;
    color: #515151;
}

nav ul li a .fa {
    width: 16px;
    text-align: center;
    margin-right: 5px;
    float: right;
}

nav ul ul {
    background-color: #ebebeb;
}

nav ul li ul li a {
    background: #f8f8f8;
    border-left: 4px solid transparent;
    padding: 10px 20px;
}

nav ul li ul li a:hover {
    background: #ebebeb;
    border-left: 4px solid #3498db;
} 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <nav class='animated bounceInDown'>
        <ul>
            <li><a href='#profile'>Profile</a></li>
            <li><a href='#message'>Messages</a></li>
            <li class='sub-menu'><a href='#settings'>Settings<i class='fa fa-caret-down right'></i></a>
                <ul>
                    <li><a href='#settings'>Account</a></li>
                    <li><a href='#settings'>Profile</a></li>
                </ul>
            </li>
            <li class='sub-menu'><a href='#Somethin'>Something<i class='fa fa-caret-down right'></i></a>
                <ul>
                    <li><a href='#settings'>Account</a></li>
                    <li><a href='#settings'>Profile</a></li>
                </ul>
            </li>
            <li class='sub-menu'><a href='#message'>Help<i class='fa fa-caret-down right'></i></a>
                <ul>
                    <li><a href='#settings'>FAQ's</a></li>
                    <li><a href='#settings'>Submit a Ticket</a></li>
                    <li><a href='#settings'>Network Status</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Метки: