Question

如果我单击#menu-item-18，将显示.proizdropdown下拉菜单列表。它包含一长串可点击的项目，但是一旦我不再将鼠标悬停在#menu-item-18上，它将消失。

如何在将鼠标悬停在其上时使其保持可见？（我只需要1023px以上，因此我使用了window.width函数。）

这就是我所拥有的：

<script>
$(document).ready(function() {
    $(window).resize(function() {
        if($(window).width() >= 1023) {
            $('#menu-item-18').hover(function(){
                $('.proizdropdown').toggle();
            });
        } else {
        }
    }).resize();
});
</script>

这是HTML：

<header>
        <div class="headerwrap">
                <nav>
                        <ul class="top-menu maxwidth clearfix">
                            <?php if ( is_front_page() ) { ?>
                                <li class="page_item current_page_item"><span><?php _e( 'Home', 'basic' ); ?></span></li>
                            <?php } else { ?>
                                <li onclick="" class="page_item">
                                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'basic' ); ?></a>
                                </li>
                            <?php }
                            wp_list_pages( 'title_li=&depth=2' ); ?>
                        </ul>
                </nav>

                <div class="proizdropdown">
                    <h5>Naš prodajni program</h5>
                    <div class="proizlft">
                    <div class="proizpadd">
                        <p><a href="#">CEVI</a></p>
                        <p><a href="#">LIMOVI</a></p>
                        <p><a href="#">ČELICI</a></p>
                        <p><a href="#">PROFILI</a></p>
                        <p><a href="#">NOSAČI</a></p>
                        <p><a href="#">USLUGE SEČENJA I SAVIJANJA</a></p>
                        <p><a href="#">VODOVOD I KANALIZACIJA</a></p>
                        <p><a href="#">GREJANJE</a></p>
                    </div>
                    </div>

                    <div class="proizrgt">
                    <div class="proizpadd">
                        <p><a href="#">ELEKTROMATERIJAL</a></p>
                        <p><a href="#">ELEKTRIČNI ALAT</a></p>
                        <p><a href="#">RUČNI ALAT</a></p>
                        <p><a href="#">ALATI I PRIBOR ZA VARENJE</a></p>
                        <p><a href="#">PRIBOR</a></p>
                        <p><a href="#">BAŠTENSKE MAŠINE, ALATI I PRIBOR</a></p>
                        <p><a href="#">PUMPE I AGREGATI</a></p>
                        <p><a href="#">VIJCI, TIPLOVI I ANKERI</a></p>
                        <p><a href="#">OKOVI</a></p>
                        <p><a href="#">TEHNIČKA HEMIJA</a></p>
                        <p><a href="#">BOJE I LAKOVI</a></p>
                        <p><a href="#">HTZ OPREMA</a></p>
                    </div>
                    </div>
                  </div>
        </div>
    </header>

Answer 1

您可以这样做–

$('#link-level-1').on('mouseover',function(){
  $('#menu-2-level').show('slow');
})
$('#menu-2-level').on('mouseleave',function(){
  $('#menu-2-level').hide('slow');
})

#menu-2-level{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul id='level-1-menu'>
    <li>
       <a id='link-level-1' href='#'> Link</a>
       <ul id='menu-2-level'>
          <li>first</li>
          <li>second</li>
          <li>third</li>
       </ul>
    </li>
  </ul>
</nav>

Answer 2

我认为您需要这样的东西...使用鼠标悬停并分配css属性以不显示任何子菜单，使其在鼠标悬停时可见...就像这样

$('#link-level-1').on('mouseover',function(){
  $('#menu-2-level').css('display','block');
})

#menu-2-level{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul id='level-1-menu'>
    <li>
       <a id='link-level-1' href='#'> Link</a>
       <ul id='menu-2-level'>
          <li>first</li>
          <li>second</li>
          <li>third</li>
       </ul>
    </li>
  </ul>
</nav>

在悬停时显示元素，但如果悬停在其上则保持可见

2 个答案: