Показывать элемент при наведении, но держать его видимым при наведении на него - PullRequest
Новая
       6

Показывать элемент при наведении, но держать его видимым при наведении на него

0 голосов
/ 06 декабря 2018

, если я нажму #menu-item-18, появится раскрывающийся список .proizdropdown.Он содержит длинный список элементов, на которые можно нажимать, но как только я перестану парить над #menu-item-18, он исчезнет.

Как сделать так, чтобы он оставался видимым при наведении на него курсора?(Мне нужно только более 1023 пикселей, поэтому я использовал функцию 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>

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Вы можете сделать это так - 

$('#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>
0 голосов
/ 06 декабря 2018

Я думаю, вам нужно что-то вроде этого ... Используйте указатель мыши и назначьте свойство 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>
...