h1 before 3

vorher
h1 after

nachher
Source /home/ch45859/web/wlkl.ch/public_html/inf/js/q04menuQ.php

<html>
 <head>
     
<script src="jquery-3.3.1/jquery.js"></script>
<script>
$().ready(function () {
    menuSh($('#menu1')[0]); //, '#m221');¨
    $('#menu1 *').mouseover(function (e) {
        console.log('mouseover ' + e.target + ' t='+ $(e.target).text());
        menuSh($('#menu1')[0], e.target); 
    } );
    $('#menu1 *').mouseout(function (e) {
        console.log('mouseout ' + e.target + ' t='+ $(e.target).text());
        menuSh($('#menu1')); 
    } );
    // alert('menSh done');
    });
    
function menuSh(m, e) { // 2 show/hide all elements of menu m, given e has focus
    $('ul,ol', m).each(function (i, e) {$(e).hide(); } );
    let y = e ? e : m;
    console.log('menuSh ' + $(e).text());
    while (true) {
        console.log('climb ' + $(y).prop('tagName').toLowerCase() + ' ' + $(y).text());
        let tg = $(y).prop('tagName').toLowerCase();
        if (y === m || tg == 'ul')
            break;
        if (tg == 'li') {
            showLi(y);
            break;
        }
        y = y.parentNode;
        if (!y)
            break;
    }
    while (true) {
        console.log('climb ' + $(y).prop('tagName').toLowerCase() + ' ' + $(y).text());
        if (y === m)
            break;
        let tg = $(y).prop('tagName').toLowerCase();
        if (tg == 'ul' || tg == 'ol')
            $(y).show();
        y = y.parentNode;
        if (!y)
            break;
    }
}

function showLi(e) {
    $('> *', e).each(function(i, y) {
        let tg = $(y).prop('tagName').toLowerCase();
        if (tg == 'ul' || tg == 'ol')
            $(y).show();
        else
            showLi(y);
    });
}
</script>
 

  <title>q04 menu jquery only </title>
 </head>
<body>
<h1>h1 before 3</h1>
vorher
<h1> menu </h1>
    <ul id='menu1'>
        <li><a href="../php/e05GetServer.php?von=eins&in=js/q03menu">eins</a></li>
        <li><a href="../php/e05GetServer.php?von=zwei&in=js/q03menu">zwei</a>
            <ul>
                <li><a href="../php/e05GetServer.php?von=21&in=js/q03menu">21</a></li>
                <li><a href="../php/e05GetServer.php?von=22&in=js/q03menu">22</a>
                    <ul><li><a href="../php/e05GetServer.php?von=221&in=js/q03menu">221</a></li><li id="m221">222</li><li>223</li></ul>
                </li>
                <li>23</li>
            </ul>
        </li>
        <li>drei 
            <ol>
                <li>31</li>
                <li>32<ul><li>321</li><li>322</li></ul></li>
                <li>33</li>
            </ol>
        </li>
    </ul>

<h1>h1 after</h1>
nachher

<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
 </body>
</html>