0

如何修改下面的代码，使其不抓取除指定元素中的所有 LI 之外的每个 LI？原因是我在另一个页面上有一个单独的水平下拉菜单，当下面的代码应用于页面时，我的右键菜单类似于我的下拉菜单。我怎样才能让它只适用于指定的元素：document.getElementById('Menu')

<!DOCTYPE html>

<head>
    <script language="javascript" type="text/javascript">
        var MenuObj;
        var activeMenuItem = false;

        //Function to highlight menu item
        function highlightMenuItem() {
            this.className = 'MenuHighlighted';
        }

        function deHighlightMenuItem() {
            this.className = '';
        }

        //Function to show menu on click of menu item
        function showMenu(e) {
            var myMouseX = (e || event).clientX;
            var myMouseY = (e || event).clientY;
            MenuObj.style.left = myMouseX + 'px';
            MenuObj.style.top = myMouseY + 'px';
            MenuObj.style.display = 'block';
            return false;
        }

        //Function to hide menu on click of menu item
        function hideMenu(e) {
            if (document.all) e = event;
            if (e.button == 0) {
                MenuObj.style.display = 'none';
            }
        }

        function initMenu() {
            MenuObj = document.getElementById('Menu');
            MenuObj.style.display = 'block';
            var menuItems = MenuObj.getElementsByTagName('LI');
            for (var no = 0; no < menuItems.length; no++) {
                menuItems[no].onmouseover = highlightMenuItem;
                menuItems[no].onmouseout = deHighlightMenuItem;

                var aTag = menuItems[no].getElementsByTagName('A')[0];
                aTag.style.paddingLeft = '5px';
                aTag.style.width = (aTag.offsetWidth) + 'px';
                aTag.onclick = hideMenu;
            }
            MenuObj.style.display = 'none';
        }


    </script>
    <style type="text/css">
        #Menu
        {
            /* The menu container */
            border: 1px solid #808080;
            background-color: #EDEDED;
            margin: 0px;
            padding: 0px;
            width: 120px; /* Width of context menu */
            font-family: Trebuchet MS;
            font-size: 8pt;
            background-repeat: repeat-y; /* Never change these two values */
            display: none;
            position: absolute;
        }
        #Menu a
        {
            /* Links in the context menu */
            color: #252525;
            text-decoration: none;
            line-height: 20px;
            vertical-align: middle;
            height: 20px; /* Don't change these 3 values */
            display: block;
            width: 100%;
        }
        #Menu li
        {
            /* Each menu item */
            list-style-type: none;
            padding: 1px;
            margin: 1px;
            cursor: pointer;
        }
        #Menu li div
        {
            /* Dynamically created divs */
            cursor: pointer;
        }
        #Menu .MenuHighlighted
        {
            background-color: #C4D0D4;
        }

    </style>
</head>
<body>
<select style="width: 250px;" id="refdocs_list">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

    <div>

                    <ul id="Menu">
                        <li><a href="#nogo">Delete document</a></li>
                        <div style="height:1px; background: #808080;"></div>
                        <li style="height: 5px;"><a href="#nogo">Clear all</a></li>
                    </ul>

        <script type="text/javascript">
            initMenu();
            MenuObj.style.display = 'none';
            document.getElementById('refdocs_list').oncontextmenu = showMenu;
            document.getElementById('refdocs_list').onclick = hideMenu;
            document.documentElement.onclick = hideMenu;
        </script>
    </div>
</body>
</html>
4

1 回答 1

0

原来我的菜单和我的右键菜单使用相同的 div 名称#menu

改变了，瞧，它又可以工作了。

于 2013-02-08T21:00:23.140 回答