Есть выпадающий список. Как сделать так, чтобы при уходе мышки со списка, этот список пропадал? Без клика, а именно, чтобы мышку увел - список пропал.
1 ответ
Вот так?
const dropdown = $('.nav-dropdown');
dropdown.hide();
$('#dropdownToggle').hover((e) => {
e.preventDefault();
dropdown.show(200);
dropdown.addClass('active');
$(window).click(_ => dropdown.slideUp());
e.stopPropagation();
});
$(".nav-dropdown").on('mouseleave',_ => dropdown.slideUp('fast'));
.nav-list {
.nav-list-item {
float: left;
list-style: none;
padding: 2rem;
background: tomato;
font-family: 'Helvetica', 'Arial', sans-serif;
a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.nav-dropdown {
position: absolute;
background: turquoise;
padding: 2rem;
li {
margin-bottom: 2rem;
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-list">
<li class="nav-list-item">
<a href="#" class="nav-link services">Services</a>
</li>
<li class="nav-list-item dropdown-wrapper">
<a href="#" id="dropdownToggle" class="nav-link tools">Tools
</a>
<!-- dropdown -->
<ul class="nav-dropdown active" style="display: block;">
<li class="nav-dropdown-item">
<a href="#" class="nav-dropdown-item-link">Buyer Cost Sheet</a>
</li>
<li class="nav-dropdown-item">
<a href="#" class="nav-dropdown-item-link">Seller Net Sheet</a>
</li>
<li class="nav-dropdown-item">
<a href="#" class="nav-dropdown-item-link">Mortage Calculator</a>
</li>
<li class="nav-dropdown-item">
<a href="#" class="nav-dropdown-item-link">Title Fees</a>
</li>
<li class="nav-dropdown-item">
<a href="#" class="nav-dropdown-item-link">Refi Calculator</a>
</li>
<li class="nav-dropdown-item">
<a href="#" class="nav-dropdown-item-link">Real Estate Forms</a>
</li>
</ul>
</li>
<li class="nav-list-item">
<a href="buyersandsellers.html" class="nav-link buy-sale">Buyers & Sellers</a>
</li>
</ul>
Есть версия с CSS
body {
background: #333;
}
a {
text-decoration:none;
color:#fff;
}
a:hover {
text-decoration:none;
color:#f60;
}
#nav ul {
margin:0;
list-style:none;
padding:5px 0 5px 0;
}
#nav li {
position:relative;
display:block;
padding:0;
margin:0 0 0 30px;
font-size:12px;
}
#nav li ul {
display:none;
position:absolute;
padding:5px 0 0px 0;
margin:0;
}
#nav li:hover ul{
display:block;
height:auto;
padding:5px 0px 0px 0px;
margin:0 auto;
border:0;
}
#nav li ul li{
clear:both;
border-top:1px solid #333;
width:13em;
margin:1px 0px -1px 0px;
padding:5px 7px;
background: rgb(0,0,0);
box-shadow: 0 0px 7px #000;
}
<div id="nav">
<ul>
<li><a href="#">Hover me</a>
<ul>
<a href="#"><li>Item 1</li></a>
<a href="#"><li>Item 2</li></a>
<a href="#"><li>Item 3</li></a>
</ul>
</li>
</ul>
</div>
-
да, спасибо, это очень помогло! а можно ли туда скролинг добавить, чтобы выпадающий список прокручивался?– Fonetty16 сен 2019 в 13:08
-
@Fonetty да конечно в большинство случае можно но это в основном зависит от ваших стилей и разметки.Если код помог примите ответ нажав на галочку рядом с ответом.– Randall16 сен 2019 в 13:10
-
1