Incorporating jquery into my angularJS controller, I have implemented a dropdown feature for my navigation bar:
$(".fa-bars").click(function() {
console.log('running ', dropDownDisplayed)
if (dropDownDisplayed == false) {
$("#links").css("display", "flex");
dropDownDisplayed = true;
console.log('dropdown displayed?', dropDownDisplayed);
} else if (dropDownDisplayed == true) {
$("#links").css("display", "none");
dropDownDisplayed = false;
console.log('dropdown displayed?', dropDownDisplayed);
}
});
function menuChecker() {
if ($scope.loginStatus == true && $(window).width() <= 1024) {
$("#links").css("top", "240px");
}
}
The above code represents the default styling for the dropdown links
@media (max-width: 1024px) {
#links {
display: none;
position: absolute;
flex-direction: column;
width: 240px;
height: 3em;
top: 140px;
right: 0px;
z-index: 1;
}
}
Despite setting $scope.loginStatus to true, the value of '#links' top property remains unchanged at 140px when the window width is less than 1024. Why is the menuChecker function not detecting the loginStatus?
It's worth mentioning that bootstrap is also being utilized in this scenario, which may potentially impact the functionality.