Home/ Questions/Q 8541821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:55:04+00:00

I have created a jQuery menu which will open when clicking on a small

  • 0

I have created a jQuery menu which will open when clicking on a small icon. This menu contains some links which are clickable and one link which will do some js actions and create a new textbox within the same menu. But when I click on the links, the menu automatically closes. So even if a textbox is displayed, it cannot be seen until we click that icon again to see the menu.

Here is a demo: http://jsfiddle.net/W2exq/1/

I have used some jQuery codes to show and hide the menu and also to display a textbox. So how can I maintain the menu opened, unless we click outside the menu to close it?
Please let me know if you need any other things.

HTML:

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js></script>
        <link rel="stylesheet" type="text/css" href="http://tharunjose.com/stack/style.css" />
</head>
<div class="notes">
    <div class="noteTooltip">
        This link is for the special purpose of the main site.<hr />
        <a class="noteEdit" id="add_btn" href="#">Edit note</a>
        <a class="noteTrash" href="#"></a>
    </div>
</div>​

CSS:

.notes{
    position:relative;
    width:16px;
    height:16px;
    margin:0 auto;
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -228px -34px transparent;
}
.notes:hover{
    cursor:pointer;
    background-position:-207px -34px;
}
.noteTooltip{
    display:none;
    position:absolute;
    top:25px;
    left:-10px;
    width:130px;
    text-align:left;
    line-height:18px;
    border:2px solid #363636;
    z-index:9999;
    background:#fbfbfb;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    padding:10px 10px 6px 10px;
    cursor:auto;
}
.noteTooltip:before{
    content:'';
    position:absolute;
    top:-10px;
    left:10px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:8px solid #000;
    z-index:9999;
}
.noteEdit{
    color:#3ba5d5;
    text-decoration:none;
    float:left;
}
.noteTrash{
    display:block;
    float:right;
    padding:6px;
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -20px -106px transparent;
}​

JS:

$(document).ready(function() {  
    $(document).click(function(e) {
        $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open");
    });
    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });


       var handler_func = function () {
        var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
        var e = document.createElement('input');
        e.type='text';
        e.width=40;
        e.name = 'added'+i;
        this.rel = i+1;
        this.parentNode.appendChild(e);
        return false;       
        }

        var add_btn = document.getElementById('add_btn');
        if(add_btn.attachEvent)
              add_btn.attachEvent('onClick', handler_func);
        else if(add_btn.addEventListener) //Firefox & company
              add_btn.addEventListener('click', handler_func, false);
});

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to stop the “click” event from bubbling up the DOM and causing it to close your “popup” menu.

    This is imperfect (allows you to create multiple text elements, I’m not going to do all your work 😛 ) but should give you a good starting point:

    $(document).ready(function() {  
    $(document).click(function(e) {
        $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open");
    });

    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });

    $(".noteTooltip").click(function(e) {
        e.stopPropagation(); //stop the onclick call bubbling up the DOM.
        e.preventDefault(); //stop the onclick call bubbling up the DOM.
    });

    $("#add_btn").click(function(event) {
       var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0,
           element = document.createElement('input');

       event.stopPropagation();  //stop the onclick call bubbling up the DOM.
       element.type='text';
       element.width=40;
       element.name = 'added'+i;
       this.rel = i+1;
       this.parentNode.appendChild(element);
       return false;   
    });

});

    event.stopPropagation() Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

    A blog post on event bubbling also.

    jsFiddle example.

    ​

    • 0