0

Есть выпадающий список. Как сделать так, чтобы при уходе мышки со списка, этот список пропадал? Без клика, а именно, чтобы мышку увел - список пропал.

1 ответ 1

4

Вот так?

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 &amp; 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>

3
  • да, спасибо, это очень помогло! а можно ли туда скролинг добавить, чтобы выпадающий список прокручивался?
    – Fonetty
    16 сен 2019 в 13:08
  • @Fonetty да конечно в большинство случае можно но это в основном зависит от ваших стилей и разметки.Если код помог примите ответ нажав на галочку рядом с ответом.
    – Randall
    16 сен 2019 в 13:10
  • 1
    @ИзбытокСусликов Хороший, полезный ответ 25 сен 2019 в 5:41

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.