css - Can't hover over jquery toggled submenu -


i built menu jquery, 4 category buttons on top menu triggering 4 submenus below. works fine, submenus appearing , changing when hover on button, can't hover on submenu, it's dissappearing when "leave" trigger button.

jsfiddle example (sorry messy code, can't reproduce entire composition in fiddle, copy-pasted important parts , issue same on site seen on example)

this jquery submenu calls: ('active' , 'rotated' changing icons/rotating text on trigger buttons, these triangles , did jquery fanciness them, hope it's still understandable)

 $('.leisuremenu').hover(function () {     $('.leisure_menu').toggleclass('show_menu');     $('.luxury_menu').toggleclass('show_menu');     $('.select-luxury').toggleclass('active');     $('.select-corporate').toggleclass('rotated');     $('.select-luxury').toggleclass('rotated'); }); $('.corporatemenu').hover(function () {     $('.corporate_menu').toggleclass('show_menu');     $('.luxury_menu').toggleclass('show_menu');     $('.select-luxury').toggleclass('active');     $('.select-luxury').toggleclass('rotated'); }); $('.vipmenu').hover(function () {     $('.vip_menu').toggleclass('show_menu');     $('.luxury_menu').toggleclass('show_menu');     $('.select-luxury').toggleclass('active');     $('.select-vip').toggleclass('rotated');     $('.select-vip').toggleclass('active'); });

in example 4th trigger button active, other 3 triggering other 3 submenu.

how can modify achieve submenus staying in place when hover on them , should dissapearing when leave submenu or hover on trigger button?

(note: there no space between trigger triangles , submenus, don't think it's css issue)

i've tried adding didn't work:

        $('.vip_menu').hover(function () {             $('.vip_menu').toggleclass('show_menu');         });         $('.corporate_menu').hover(function () {             $('.corporate_menu').toggleclass('show_menu');         });         $('.leisure_menu').hover(function () {             $('.leisure_menu').toggleclass('show_menu');         });

let me know if need clarify more details/code.

any appriciated.

the hover() function of jquery lets give 1 or 2 functions. if provide both, first executed on mouseenter , second executed on mouseleave. if provide one, function called on both events, why toggling class again. since want happen when enter, can change hover(...) mouseenter(...). however, can bit of cleanup have 1 function handle events, instead of separate function each menu.

i changed markup add menu class each of menus. let find them easier in code later. used regex figure out menu name. make bit easier on using data- attribute instead of having deal regex (then $(this).data("menu-name") example).

instead of using toggleclass you'll want hide of them, show 1 you're interested in. way don't need know ones hidden or showing.

below interesting code, i've included in an updated fiddle well.

$(".link").mouseenter(function() {   var menuname = /\bselect-(\w+?)\b/.exec(this.classname)[1];    $(".link").removeclass("active rotated");   $(this).addclass("active rotated");    $(".menu").removeclass("show_menu");   $("." + menuname + "_menu").addclass("show_menu"); });

Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more