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

JavaScript
1

Hi,

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


<!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.

2

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.