My script is not functioning properly when I click outside of the drop-down menu of the "Sign in" button.
$(document).ready(function() {
$(".openmenu").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
$(".submenu").mouseup(function() {
return false
});
$(".openmenu").mouseup(function() {
return false
});
$(document).mouseup(function() {
$(".submenu").hide();
$(".openmenu").attr('id', '');
});
});
$(document).ready(function() {
myInit()
})/* CSS Styles */ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-bar">
<div id="top-bar-inner">
<div class="right">
<ul>
<li><a href="/">Register</a>
</li>
<li><a href="#" class="openmenu">Sign In</a>
</li>
<div class="submenu" style="display: none;">
<p>test</p>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>When I click on the "Sign in" button, it adds the active class which changes the background color of the button. However, this functionality does not work when clicking outside the button. I want the active class to be removed and the original CSS colors to return. What am I doing wrong?