CSS: Menü bei Hover geöffnet und bei Klick auf

Question

Ich habe eine <li>, dass, wenn hovered eine <ul> öffnen.

Ich möchte in der Lage sein, auch auf die <li> klicken und lassen Sie die <ul> öffnen und schließen, aber immer noch die Hover-Funktionalität. Im Moment, sobald der Klick auftritt, verliere ich die :hover.

JSFiddle

CSS

ul#popup-menu { 
    display: inline-block; 
    margin: 0; 
    cursor: pointer; 
} 
ul#popup-menu ul { 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    margin: 0; 
} 
ul#popup-menu li { 
    list-style-type: none; 
    position: relative; 
} 
ul#popup-menu li:hover > * { 
    display: block; 
} 

HTML

<ul id="popup-menu"> 
    <li> 
     Click to open 
     <ul> 
      <li> 
       Item 1 
      </li> 
      <li> 
       Item 2 
      </li> 
      <li> 
       Item 2 
      </li> 
     </ul> 
    </li> 
</ul> 

JavaScript

$(document).ready(function() { 
    $('#popup-menu').click(function() { 
     var element = $('ul#popup-menu ul') 
     if (element.css('display') === 'block') { 
      $('ul#popup-menu ul').css('display', 'none'); 
     } else { 
      $('ul#popup-menu ul').css('display', 'block'); 
     } 
    }); 
}); 

Answer 1

Fügen Sie Code hinzu, der das style-Attribut zurücksetzt, da inline-style eine höhere Priorität hat als ul#popup-menu li:hover > * css selector. Wenn also der Style eingestellt ist, ist display-block immer none;

Versuchen Sie folgendes:

$(document).ready(function() { 
    $('#popup-menu').click(function() { 
    if ($('ul#popup-menu ul').css('display') === 'block') { 
     $('ul#popup-menu ul').css('display', 'none'); 
    } else { 
     $('ul#popup-menu ul').css('display', 'block'); 
    } 
    }); 

    $('#popup-menu > li').mouseleave(function() { 
    $('ul', this).removeAttr('style'); 
    }) 
}); 

Fiddle

Also, wenn Sie das Menü Kopf es verschachtelt UL goest Leave und style Attribut entfernen, so Hover funktioniert wieder

Answer 2

nur wenig spielen mit Klassen und tun Sie es mit JS

$(document).ready(function() { 
 
    $('#popup-menu').hover(
 
    function() { 
 
     $('ul#popup-menu ul.hover').css('display', 'block'); 
 
    }, 
 
    function() { 
 
     $('ul#popup-menu ul.hover').css('display', 'none'); 
 
    } 
 
); 
 
    $('#popup-menu').click(function() { 
 
    if ($('ul#popup-menu ul').hasClass('active')) { 
 
     $('ul#popup-menu ul').removeClass('active'); 
 
     $('ul#popup-menu ul').addClass('hover'); 
 
    } else { 
 
     $('ul#popup-menu ul').removeClass('hover'); 
 
     $('ul#popup-menu ul').addClass('active'); 
 
    } 
 
    }); 
 
});

ul#popup-menu { 
 
    display: inline-block; 
 
    margin: 0; 
 
    cursor: pointer; 
 
} 
 

 
ul#popup-menu ul { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    margin: 0; 
 
} 
 
ul#popup-menu ul.active { 
 
    display:block; 
 
} 
 
ul#popup-menu li { 
 
    list-style-type: none; 
 
    position: relative; 
 
} 
 

 
/* ul#popup-menu li:hover > * { 
 
    display: block; 
 
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="popup-menu"> 
 
    <li> 
 
     Open menu 
 
     <ul class="hover"> 
 
     <li> 
 
      Item 
 
     </li> 
 
     <li> 
 
      Item 
 
     </li> 
 
     <li> 
 
      Item 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

$(document).ready(function() { 
$('#popup-menu').click(function() { 
if ($('ul#popup-menu li ul').css('display') === 'block') { 
    $('ul#popup-menu li ul').css('display', 'none'); 
} else { 
    $('ul#popup-menu li ul').css('display', 'block'); 
} 
}); 

$("ul#popup-menu li").bind 
({ 
    mouseover: 
    function() 
    { 
    $('ul#popup-menu li ul').css('display', 'block'); 
    }, 
    mouseout: 
    function() 
    { 
    $('ul#popup-menu li ul').css('display', 'none'); 
    } 
    }); 

    }); 

Pen

Answer 4

dies versuchen, diese halten Sie Ihre Effekt schweben auch nach Klick. Das funktioniert sogar, wenn Sie entfernen: Hover von Ihrem CSS.

$(document).ready(function() { 
    $('#popup-menu').click(function(){ 
    $("ul li > ul").show(); 
    $(this).mouseout(function(){ 
    $("ul li > ul").hide(); 
    }); 
    }); 
});