将悬停转换为Click事件

Question

您能帮我将其转换为点击事件，而不是将鼠标悬停吗

 <script> $(document).ready(function () { //Show then hide ddown menu on hover $('.menuitem').hover(function () { $(this).children('.navmain').slideDown(500); }, function () { $(this).children('.navmain').slideUp(500); }); }); </script> 

完整脚本： jQuery Dropdown Menu hover向下/向上滑动

我尝试了多种方法并得到了满足。

谢谢您的帮助。

Answer 1

使用on ，并在函数调用之前将çlick作为第一个参数传递。

<script>
$(document).ready(function () {
    //Show then hide ddown menu on hover
    $('.menuitem').on('click', function () {
    $(this).children('.navmain').slideDown(500);
    }, function () {
        $(this).children('.navmain').slideUp(500);
    });
}); 
</script>

Answer 2

我认为这对您会很好：

我已经将.slideDown(500)和.slideUp(500)更改为.slideToggle(500)

 $(document).ready(function() { //Show then hide ddown menu on hover $(document).on('click', '.menuitem', function() { $(this).children('.navmain').slideToggle(500); }); }); 

 .top>li:hover { text-decoration: underline; } /* On hover show the menu drop down */ /* Position the menu drop down relative to the nav bar */ .top>li>div { position: absolute; left: 0; top: 41px; /* Don't show unless the nav bar li is hovered */ display: none; background: #fff; padding: 10px 10px; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4); /* Hide anything that might be outside the div */ overflow: hidden; } /* End of Navigation Bar Styling */ /* Drop Down Menu Styling */ .navmain { width: 100%; border: 1px solid #B2BEB5; } .nav-divider { display: inline-block; width: 1.8%; } .nav-focus-art { display: inline-block; width: 20%; vertical-align: top; text-align: left; animation-duration: 4s; } .nav-art-author, .nav-art-title { display: inline-block; padding: 5px 0px; } .nav-art-title { font-size: 1.4em; } .nav-art-image { display: inline-block; } .nav-divider-2 { display: inline-block; width: 3.8%; } .nav-headlines { display: inline-block; width: 40%; font-size: 1.2em; font-weight: bold; text-align: left; padding-right: 3px; } .nav-headline-link { border-bottom: 1px solid #B2BEB5; padding: 0 0 5px 0; } .nav-headline-text { padding: 10px 0px; font-family: 'Arapey', serif; color: #000000; font-size: 17px; font-weight: 400; } .nav-art-author { font-size: 15px; text-decoration: none; } a.nav-text-link:link, a.nav-text-link:visited, a.nav-text-link:hover, a.nav-text-link:active { text-decoration: none; color: #603c68; font-weight: 400; } a.nav-text-link:hover { text-decoration: none; font-weight: 700; } .nav-headline-link:last-child { border-width: 0px; } .nav-links { display: inline-block; width: 20%; vertical-align: top; text-align: left; } .nav-link { padding-bottom: 20px; } .nav-empty-cell { padding-top: 40px; } .nav-headline-link:first-child { color: #bfa76a; font-size: 40px; font-family: 'Playfair Display', serif; font-weight: 700; } .nav-link:first-child {} /* End of Drop Down Menu Styling */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <ul class="top" id="ddm"> <li><a href="#">home</a></li> <li class="menuitem"><a href="#">bras</a> <div class="navmain"> <div class="nav-divider"></div> <div class="nav-headlines"> <div class="nav-headline-link">BRAS</div> <div class="nav-headline-text">Gi&#275; Gi&#275; specializes in finding comfortable, well fitting, beautiful bras for all women. Come and experience a professional bra fitting with one of our certified fitters. We have a fabulous selection of amazing bras, sizes ranging from 28 inch to 56 inch bands and AA to J cups!!</div> </div> <div class="nav-divider-2"></div> <div class="nav-focus-art"> <span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Strapless Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Nursing Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Minimizer Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Push-up Bra</a></span><br> </div> <div class="nav-divider-2"></div> <div class="nav-focus-art"> <span class="nav-art-author"><a href="#" class="nav-text-link">Post-surgical Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Mastectomy Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Backless Bra</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Bathing Suits (or swimwear?)</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Boustiers</a></span><br> <span class="nav-art-author"><a href="#" class="nav-text-link">Bralettes</a></span><br> </div> <div class="nav-divider-2"></div> </div> <!-- End of nav-main --> </li> <li><a href="#">MASTECTOMY</a></li> </ul> 

希望这对您有所帮助。