Why does this element stay displayed while the display ID is taken away?

**Frank S** · Feb 8, 2013 05:01

Hi,

I am making an onclick fly-out menu for touchscreens. In principle it is working and it looks like this:

HTML Code:

<!DOCTYPE html>
<head>
<style type="text/css">
body {
    font: normal .8em Verdana;
    }
#navDiv ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
#navDiv li {
    width: 100px;
    position: relative;
    margin-bottom: 15px;
    }
#navDiv li ul {
    position: absolute;
    left: 100px;
    top: 0;
    display: none;
    }
#navDiv li#dynamicID ul {
    display: block;
    }
#navDiv a {
    display: block;
    background: orange;
    color: blue;
    text-decoration: none;
    }
</style>
<script>
function manageID(selectedElement)
{
    var possessor = document.getElementById('dynamicID');
    if (possessor == null)
    {
        selectedElement.id = 'dynamicID';
    }
    else if (possessor == selectedElement)
    {
        selectedElement.id = '';
    }
    else if (possessor != selectedElement)
    {
        possessor.id = '';
        selectedElement.id = 'dynamicID';
    }
}
function takeawayID()
{
    var possessor = document.getElementById('dynamicID');
    possessor.id = '';
    document.getElementById('IDdisplay').innerHTML = 'The possessor has now this ID: '+possessor.id;
}
</script>
</head>
<body>
<div id="navDiv">
    <ul>
        <li onclick="takeawayID()"><a href="#">Hyperlink 1</a></li>
        <li onclick="manageID(this)"><a href="#">Hyperlink 2 &rarr;</a>
            <ul>
                <li onclick="takeawayID()"><a href="#">Hyperlink 2-A</a></li>
                <li><a href="#">Hyperlink 2-B</a></li>
                <li><a href="#">Hyperlink 2-C</a></li>
            </ul>
        </li>
        <li onclick="manageID(this)"><a href="#">Hyperlink 3 &rarr;</a>
            <ul>
                <li><a href="#">Hyperlink 3-A</a></li>
                <li><a href="#">Hyperlink 3-B</a></li>
                <li><a href="#">Hyperlink 3-C</a></li>
            </ul>
        </li>
        <li onclick="takeawayID()"><a href="#">Hyperlink 4</a></li>
    </ul>
</div>
<p id="IDdisplay">&nbsp;</p>
</body>
</html>

Here it is live: http://jsfiddle.net/8ceXt/1/

The manageID function is working beautifully. However, I've come to know a number of mobile and tablet browsers to be so unpredictable that I want the assigned ID taken away entirely if a child menu item is clicked. And I need that takeawayID function for three-level menus.

Now, while the IDdisplay shows that when child menu hyperlink 2A is clicked (the only one I 'loaded up' with an onclick="takeawayID"), any ID is indeed taken away, but the child menu stays on display. And to add to the fun & confusion, if the line possessor.id = ' ' is outcommented, the reverse behavior is seen: any assigned ID is not taken away, but the child menu disappears...

How must the code be changed so that it works properly?

Thanks in advance.

**Frank S** · Feb 8, 2013 07:11

I found part of the answer. The child menu is part of the parent menu item, so when I click the child menu item I am virtually also clicking the parent menu item. And then both functions are executed. Thus, the ID is taken away anyway when I click a child menu item, also without the takeawayID function. So that problem is solved.

What remains is how I get the three-level menu to work. But I will probably start a new thread for that, because I think that will bring up a different question.

User Tag List

Thread: Why does this element stay displayed while the display ID is taken away?

Thread Tools

Display

Why does this element stay displayed while the display ID is taken away?

Solved

Bookmarks

Bookmarks

Posting Permissions