1

Есть такая разметка

$(function() {
  $('#nav-main li#submenu ul').hide();
  $('#nav-main li#submenu').hover(
    function() {
      clearTimeout($.data(this, 'timer'));
      $('ul', this).stop(true, true).slideDown(300);
    },
    function() {
      $.data(this, 'timer', setTimeout($.proxy(function() {
        $('ul', this).stop(true, true).slideUp(300);
      }, this), 200));

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="submenu_container">
  <div>
    <a href="#"><img src="images/drop_01.jpg" alt="" /><span>1</span></a>
    <a href="#"><img src="images/drop_02.jpg" alt="" /><span>2</span></a>
    <a href="#"><img src="images/drop_03.jpg" alt="" /><span>3</span></a>
  </div>
</div>
<nav id="nav-main">
  <ul>
    <li id="submenu">
      <a href="#">Каталог</a>
      <ul>
        <li><img src="images/drop_01.jpg" alt="" /><a href="#">1</a></li>
        <li><img src="images/drop_02.jpg" alt="" /><a href="#">2</a></li>
        <li><img src="images/drop_03.jpg" alt="" /><a href="#">3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Пунскт 2</a>
    </li>
    <li>
      <a href="#">Пунскт 3</a>
    </li>
  </ul>
</nav>

Изначально при наведении на каталог выпадала менюшка по вот этому скрипту

Проблема в том, что мне надо переделать скрипт таким образом, чтобы теперь по ховеру выпадала менюшка с id="submenu_container", а не список внутри пункта меню.

1 ответ 1

0

Замените при вызове содержимое:

function change_target(obj, data) {

  $(obj).html($(data).html());

}
$(function() {

  $('#nav-main li#submenu ul').hide();
  $('#nav-main li#submenu').hover(
    function() {
      change_target('#target', '#submenu_container'); //подмена содержимого
      clearTimeout($.data(this, 'timer'));
      $('ul', this).stop(true, true).slideDown(300);
    },
    function() {
      $.data(this, 'timer', setTimeout($.proxy(function() {
        $('#target').stop(true, true).slideUp(300);
      }, this), 200));

    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="submenu_container">
  <li>

    <a href="#"><img src="images/drop_01.jpg" alt="" /><span>11</span></a>
    <a href="#"><img src="images/drop_02.jpg" alt="" /><span>22</span></a>
    <a href="#"><img src="images/drop_03.jpg" alt="" /><span>33</span></a>

  </li>
</div>
<nav id="nav-main">
  <ul>
    <li id="submenu">
      <a href="#">Каталог</a>
      <ul id="target">
        <li><img src="images/drop_01.jpg" alt="" /><a href="#">1</a></li>
        <li><img src="images/drop_02.jpg" alt="" /><a href="#">2</a></li>
        <li><img src="images/drop_03.jpg" alt="" /><a href="#">3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Пунскт 2</a>
    </li>
    <li>
      <a href="#">Пунскт 3</a>
    </li>
  </ul>
</nav>

4
  • Видимо, не очень понятно изложил суть проблемы...На самом деле мне не нужно сохранять старую разметку внутри каталога. Ее можно удалить, просто нужно чтоб по наведению открывалось содержание блока div id="submenu_container". Я пытался переделать скрипт, но как только мышь покидает пункт меню "Каталог", выпадающее меню закрывается
    – ti4er
    17 дек 2017 в 16:09
  • Можно тогда добавить display: none изначально и по hover добавить display: block. А закрывать по клику, иначе скрипт отловит что ушло свойство hover и скроет его тоже. Как нужно? 18 дек 2017 в 17:06
  • Закрывать по клику не выход. Ладно, в любом случае спасибо вам за помощь
    – ti4er
    19 дек 2017 в 13:19
  • Есть еще топорный метод, положите структуру submenu_container под submenu и задайте позиционирование. Будет чистый css 20 дек 2017 в 15:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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