Тоггл не останется открытым

Question

У меня есть изображения (.rv_button), которые действуют как кнопки для переключения ниже div (#reveal). Я хочу навести курсор на кнопку, чтобы открыть div, но сейчас я не могу заставить div оставаться открытым. Может ли кто-нибудь помочь мне с этим?

jQuery(document).ready(function() {
  // Hide the div
  jQuery('#reveal').hide();
  jQuery('.rv_button').on('mouseenter mouseleave', function(e) {
    e.preventDefault();
    jQuery("#reveal").fadeToggle()(slow, swing, callback);
    jQuery('.rv_button').toggleClass('open');
  });
});

Answer 1

Вместо использования toggleClass() в mousenter удалите класс open из всех кнопок и добавьте его в e.target или $(this). А на mouseout просто удалите его из всех кнопок.

Также удалите (slow, swing, callback) или используйте их в качестве аргументов в fadeToggle().

например

jQuery("#reveal").fadeToggle('slow');

И чтобы div оставался открытым, просто оберните кнопки и div в контейнере и прослушивайте событие mouseout на нем вместо самих кнопок.

$(document).ready(function() {
  // Hide the div
  $('#reveal').hide();
  $('.rv_button').on('mouseenter', function(e) {
    e.preventDefault();
    $('.rv_button').removeClass('open');
    $(e.target).addClass('open');
    $("#reveal").fadeIn();
  });
  $('.container').on('mouseleave', function(e) {
    e.preventDefault();
    $('.rv_button').removeClass('open');
    $("#reveal").fadeOut();
  });
});

.container {
  width: 400px;
}

#reveal {
  width: 400px;
  height: 400px;
  background-color: beige;
  text-align: center;
  font-size: 2em;
}

.rv_button {
  padding: 1em;
  background-color: brown;
  width: 400px;
  box-sizing: border-box;
}

.open {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="rv_button">Button 1</div>
  <div class="rv_button">Button 2</div>
  <div class="rv_button">Button 3</div>
  <div id="reveal">Reveal</div>
</div>