javascript - Bootstrap Collapse missed event when mousing through quickly -
i have run problem when using bootstraps collapse , hover event. there small delay (not sure if supposed happen) , if mouse out before delay complete mouse out not caught. can same thing mousing out , in before delay.
i have created js-fiddle example of happening.
https://jsfiddle.net/3g2gdyn4/4/
<body> <div class="box"> <div class="box_area"> </div> <div class="box_dropdown"> <ul> <li>test</li> </ul> </div </div> </body> $(document).ready(function () { $(".box_area").hover(function(e) { $(".box_dropdown").collapse("show") }, function(e) { $(".box_dropdown").collapse("hide") }); }) .box_area { width: 200px; height: 200px; border: solid black 1px; } .box_dropdown { display: none; width: 200px; border: solid red 1px; }
frameworks , extensions:
- //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
external refrences:
- //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
- //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
i have tried .show , .hide instead of .collapse run different bug when sized phones. not option unless can solve bug. lot harder show example because shows touch screens.
give shot: fiddle
i changed way javascript functions. instead of triggering .collapse()
plugin bootstrap we're triggering toggling of in
class. effect same, , bootstrap uses collapse system, go different way in situation.
you'll have full screen snippet see working.
$(document).ready(function () { $(".box_area").hover(function(e) { $('.box_dropdown').toggleclass('in'); }, function(e) { $('.box_dropdown').toggleclass('in'); }); })
.box_area { width: 200px; height: 200px; border: solid black 1px; } .box_dropdown { display: none; width: 200px; border: solid red 1px; }
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="box"> <div class="box_area"> </div> <div class="box_dropdown collapse"> <ul> <li>test</li> </ul> </div> </div> </body>
Comments
Post a Comment