Question 36103 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery menu display only once, then will not display again until browser refresh

I have a strange issue where my jquery menu comes up just fine the first time, but if the menu was closed by clicking outside the menu, it won’t come up again until the browser is refreshed. Please help.

The following will show the menu only the first time until page is refreshed:

document.getElementById("selectCourse").style.display = "block";
document.getElementById("selectCourse").style.display = "none";

The following will show the menu the first time, then will show subsequently for a brief moment then disappear:

$("#selectCourse").show("fast");
$("#selectCourse").hide("fast");

function wSelect() {
    var name = "#selectCourse";
    var menuYloc = null;
    //document.getElementById("selectCourse").style.display = "block";   // Display menu
    $("#selectCourse").show("fast");
    $(document).ready(function() {
        menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")));
        $(window).scroll(function () { 
            offset = menuYloc+$(document).scrollTop()+"px";
            $(name).animate({top:offset},{duration:500,queue:false});
        });
        $("html").click(function() {
            //document.getElementById("selectCourse").style.display = "none";
            $("#selectCourse").hide("fast");
        });
    }); 
}

<div id="selectCourse">
    <div id="floatMenu">
        <p>Select a Course</p>
        <ul id="choices" class="menu">
            <li>
                <a href="course1.html" onlick="return true;">
                    <img src="course1.png" height="40">Course 1</a>
            </li>
            <li>
                <a href="course2.html" onlick="return true;">
                    <img src="course2.png" height="40">Course 2</a>
            </li>
        </ul>
    </div>
</div>

#selectCourse {
    display: none;
    width: 300px;
}
   
#floatMenu {
    position: absolute;
    background-color: #0078d0;
    border: 1px solid #000;
    top: 80px;
    right: 10%;
    margin: 5px;
}
#floatMenu ul {
    margin: 20px 30px 20px 0;
    font-size: 16px;
    list-style-type: none;
}
#floatMenu ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ccc;
    padding: 5px 10px;
}
#floatMenu ul li a:hover {
    color:#fff;
    background-color:#333333;
}
/*
#floatMenu ul.menu li a:hover {
    border-left: 4px solid #f09;
}
*/
#floatMenu p {
    color: #ffffff;
    text-align: left;
    margin-left: 40px;
    font-size: 18px;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After fiddling with it for couple of days without a fix, I've moved on to JQuery UI Menu Widget that took care of the issue: https://api.jqueryui.com/1.10/menu/#:~:text=The%20menu%20widget%20uses%20the%20jQuery%20UI%20CSS,icons.%20ui-menu-item%3A%20The%20container%20for%20individual%20menu%20items.


  2. 0

    your code is something confuse, but as per your requirement submenu should close when outside click.

    to achieve this task you have to use,

    1. ul in li
    2. in jquery use document click
    3. in below click on product then submenu open , and if you click outside submenu hide. try same way to achieve this simple requirement .
    $(document).ready(function(){
   $(".dropdown").click(function(){
        $(this).find(".dropdown-menu").slideToggle("fast");
    });
});
$(document).on("click", function(event){
    var $trigger = $(".dropdown");
    if($trigger !== event.target && !$trigger.has(event.target).length){
        $(".dropdown-menu").slideUp("fast");
    }            
});
        ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown-menu{
        min-width: 100%; 
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li ul.dropdown-menu li{
        display: block;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Click Outside</title>
 
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
            <a href="#">Products &#9662;</a>
            <ul class="dropdown-menu">
                <li><a href="#">test 1</a></li>
                <li><a href="#">test 2</a></li>
                <li><a href="#">test 3</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search