Egy elemen belül kettő különböző esemény?
Azt szeretném konkrétan megvalósítani, hogy van egy menüm, és ha ráviszem az egeret az egyik menüpontra akkor lenyílik egy másik menü, mert a hover esemény közbe lép. Viszont a weboldal responsive, és mobil nézeten nem néz ki jól ez a hover, mert bugos, ezért a következőt szeretném megírni javascriptben vagy jquery-ben:
Ha az oldal nagyobb mint 800 pixel, akkor az almenük hover eseménnyel essenek le, viszont ha az oldal mérete kisebb mint 800 pixel, akkor az almenük slideToggle eseménnyel essenek le.
válasza:function menuwidth() {
if($(window).width() > 800) {
// nagyobb mint 800
} else {
// kisebb mint 800
}
}
$(document).ready(menuwidth);
$(window).resize(menuwidth);
function menuwidth() {
if($(window).width() > 800) {
$("#lenyilo_randomvicc_hover").mouseover(function(){
$("#lenyilo_fejlec_menu_ul_randomvicc").css("display", "block");
});
$("#lenyilo_randomvicc_hover").mouseout(function(){
$("#lenyilo_fejlec_menu_ul_randomvicc").css("display", "none");
});
$("#lenyilo_toplista_hover").mouseover(function(){
$("#toplista_lenyilo_menu_ul").css("display", "block");
});
$("#lenyilo_toplista_hover").mouseout(function(){
$("#toplista_lenyilo_menu_ul").css("display", "none");
});
} else {
$("#lenyilo_randomvicc_hover").click(function(){
$("#lenyilo_fejlec_menu_ul_randomvicc").slideToggle();
});
$("#lenyilo_toplista_hover").click(function(){
$("#toplista_lenyilo_menu_ul").slideToggle();
});
}
}
$(document).ready(menuwidth);
$(window).resize(menuwidth);
Ez nem jó, mert egyszerre csinálja mind a kettőt
válasza:Sajnos csak úgy sikerült megoldanom, hogy a betöltődéskor nézi meg az oldal szélességét, átméretezéskor nem. Sajnos a .resize nem akart működni. Egy kicsit leegyszerűsítettem a kódot és raktam bele plusz dolgokat is:
--------------------------------
HTML
--------------------------------
<div class="menukontener">
<div class="menutrigger">Menü</div>
<ul class="menu">
<li>Menüpont 1</li>
<li>Menüpont 2</li>
</ul>
<div class="menutrigger">Menü 2</div>
<ul class="menu">
<li>Menüpont 1</li>
<li>Menüpont 2</li>
</ul>
</div>
--------------------------------
JS + jQuery
--------------------------------
$(document).ready(function(){
if($(window).width() > 800) {
$(".menukontener ").attr("id","gep_menu");
} else {
$(".menukontener ").attr("id","mobil_menu");
}
});
$("#gep_menu .menutrigger").mouseover(function() {
if($(this).next(".menu").is(":hidden")) {
$(".menu").slideUp();
$(this).next(".menu").slideDown();
}
});
$("#mobil_menu .menutrigger").click(function() {
if($(this).next(".menu").is(":hidden")) {
$(".menu").slideUp();
$(this).next(".menu").slideDown();
}
});
------------------------------
CSS
------------------------------
.menu {
display: none;
}
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!