Блог

Главная - Вопросы по программированию - jQuery slideToggle обратный эффект при обновлении страницы

jQuery slideToggle обратный эффект при обновлении страницы

#javascript #html #jquery #css #wordpress

Вопрос:

Я создал пользовательское меню на WordPress с помощью jQuery slideToggle для переключения выпадающего списка при наведении курсора. Код относительно прост, и все работает нормально.

Но я обнаружил, что когда я обновляю страницу, перемещая курсор между двумя пунктами меню, в которых есть выпадающие меню, эффект slideToggle в основном меняется на один из них. Ускользает, когда я наведу на него курсор, и возвращается, когда я убираю курсор из меню.

     jQuery(document).ready(function() {
      jQuery(".has-mega-menu").has('.sub-menu').children('.sub-menu').hide();
      jQuery('.has-mega-menu').hover(function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideToggle();
      });
    }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="menu-item-28" class="has-mega-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28">
      <a href="shop-link">Shop</a>
      <ul class="sub-menu" style="height: 222px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; display: none;">
        <li id="menu-item-42" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-42"><a href="#">TEST</a>
          <ul class="sub-menu">
            <li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41">
              <a href="#">Test Item 1</a>
            </li>
            <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
              <a href="Shop-link">Test Item 2</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-43" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-43">
          <a href="#">TEST 2</a>
          <ul class="sub-menu">
            <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44">
              <a href="#">Test Item 1</a>
            </li>
            <li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45">
              <a href="#">Test Item 2</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-46" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-46">
          <a href="#">TEST 3</a>
          <ul class="sub-menu">
            <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47">
              <a href="#">Test Item 1</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

Ответ №1:

Ладно, я не совсем понимаю, что происходило. Что-то с порядком, что-то не так с переключателем. Но то, как я это исправил, состояло в том, чтобы скользить вниз и скользить вверх отдельно. И я также добавил z-индекс, чтобы анимация скольжения была постоянной.

 jQuery(document).ready(function() {
    jQuery('.has-mega-menu > .sub-menu').hide();
    jQuery('.has-mega-menu').hover(function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown(250);
        jQuery(this).children('.sub-menu').css('z-index', '2')
    }, function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
        jQuery(this).children('.sub-menu').css('z-index', '1')
    });
});
Метки: