HTML
<div class="profile">
<a href="#" class="hoverdropdown" onclick="return false;">Profile</a>
<ul class="dropdown" style="display: none;">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
Jquery
$(document).ready(function(){
listDropdown();
});
$(window).resize(function(){
listDropdown();
});
function listDropdown()
{
var windowWidth=$(window).width();
if(windowWidth>=768)
{
$(".profile").each(function(){
$(this).mouseover(function(){
$(this).find(".dropdown").show();
});
$(this).find(".dropdown").mouseout(function(){
$(this).hide();
});
});
$(document).mouseout(function(e) {
if(($(e.target).parents('.profile').length<=0))
{
$(".profile .dropdown").hide();
}
});
}
else if(windowWidth<769)
{
$(".profile").each(function(){
$(this).click(function(){
$(this).find(".dropdown").toggle();
$(this).find(".hoverdropdown").children(".fa-plus").toggleClass("fa-minus");
});
});
}
}
For window widths less than 768, click option is enabled. For window widths above 768, mouseover option is enabled.
Any alternative solutions are welcome.