javascript - Onclick 或 href 在悬停效果的下拉菜单上不起作用

Question

我有一个菜单，鼠标悬停时会下拉菜单，单击它会打开一个新页面。这是 HTML；

<ul class=“Mainmenu” id=“Mainmenu”>
<li class=“dropdown”><a onclick=“window.location.reload()”>Home</a></li>
<li class=“dropdown”><a href=“Page1.html” onclick=“Loadpage(); return false;”>About us</a>
<ul class=“dropdown-menu” id=“menu1”>
<li class=“dropdownlink” id=“link1”><a href=“#”>Domestic</a></li>
<li class=“dropdownlink” id=“link2”><a href=“#”>International</a></li>
</ul>
</li>
<li class=“dropdown”><a onclick=“Loadteampage(); return false;”>Team</a></li>
</ul>

这是 JavaScript:

function Loadpage(){
window.location.href=“Page1.html”;
}
function Loadteampage(){
window.location.href=“Team.html”;
}

这是CSS

.Mainmenu{ 
height: 15px; 
font-family: Calibri;
font-size 12. 5px; 
display: inline; 
position: absolute; 
width: 100%;
line-height: 15px; 
text-align: center; 
list-style: none; 
top 18px;
}

.Mainmenu a{
float: left;
font-size: 14px; 
color: #FAF6AF; 
text-align: center; 
padding: 5px 10px; 
text-decoration: none; 
height: 15px; 
line -height: 15px; 
transition: all 0.7s ease;
}

ul.Mainmenu > li{
float: left; 
position: relative;
}

ul.Mainmenu li > a{
height: 15px; 
line-height: 15px; 
text-align: Center; 
display: block; 
background: #000000; 
color: #FAF6AF; 
white-space: nowrap; 
}

ul.Mainmenu li:hover > a{
background-color: #FAF6AF; 
color #000000; 
cursor: pointer;}

ul.Mainmenu > li ul {
display: none; 
position: absolute;
}

ul.Mainmenu > li:hover ul{
display: block; 
cursor: pointer;
}

ul.Mainmenu > li ul li{
display: block; 
position: relative; 
top: 25px; 
left: -40px;
}

.dropdownlink a{
text-align: center; 
line-height: 15px; 
font-size: 12.5px; 
padding: 0px 0px 0px 0px; 
margin: 0; 
width: 100%; 
}

“关于我们”应该在悬停时作为下拉菜单，在点击时作为链接。但是“关于我们”上的 onclick 和 href 不起作用。甚至我试过 alert();在 onclick 中，但它不起作用。

请在下面找到 JSFIDDLE 链接:

JSFIDDLE

有人可以帮我解决这个问题吗？

Answer 1

编辑以包含我最喜欢的扩展列表 javascript

/*

CollapsibleLists.js

An object allowing lists to dynamically expand and collapse

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the CollapsibleLists object
var CollapsibleLists =
    new function(){

      /* Makes all lists with the class 'collapsibleList' collapsible. The
       * parameter is:
       *
       * doNotRecurse - true if sub-lists should not be made collapsible
       */
      this.apply = function(doNotRecurse){

        // loop over the unordered lists
        var uls = document.getElementsByTagName('ul');
        for (var index = 0; index < uls.length; index ++){

          // check whether this list should be made collapsible
          if (uls[index].className.match(/(^| )collapsibleList( |$)/)){

            // make this list collapsible
            this.applyTo(uls[index], true);

            // check whether sub-lists should also be made collapsible
            if (!doNotRecurse){

              // add the collapsibleList class to the sub-lists
              var subUls = uls[index].getElementsByTagName('ul');
              for (var subIndex = 0; subIndex < subUls.length; subIndex ++){
                subUls[subIndex].className += ' collapsibleList';
              }

            }

          }

        }

      };

      /* Makes the specified list collapsible. The parameters are:
       *
       * node         - the list element
       * doNotRecurse - true if sub-lists should not be made collapsible
       */
      this.applyTo = function(node, doNotRecurse){

        // loop over the list items within this node
        var lis = node.getElementsByTagName('li');
        for (var index = 0; index < lis.length; index ++){

          // check whether this list item should be collapsible
          if (!doNotRecurse || node == lis[index].parentNode){

            // prevent text from being selected unintentionally
            if (lis[index].addEventListener){
              lis[index].addEventListener(
                  'mousedown', function (e){ e.preventDefault(); }, false);
            }else{
              lis[index].attachEvent(
                  'onselectstart', function(){ event.returnValue = false; });
            }

            // add the click listener
            if (lis[index].addEventListener){
              lis[index].addEventListener(
                  'click', createClickListener(lis[index]), false);
            }else{
              lis[index].attachEvent(
                  'onclick', createClickListener(lis[index]));
            }

            // close the unordered lists within this list item
            toggle(lis[index]);

          }

        }

      };

      /* Returns a function that toggles the display status of any unordered
       * list elements within the specified node. The parameter is:
       *
       * node - the node containing the unordered list elements
       */
      function createClickListener(node){

        // return the function
        return function(e){

          // ensure the event object is defined
          if (!e) e = window.event;

          // find the list item containing the target of the event
          var li = (e.target ? e.target : e.srcElement);
          while (li.nodeName != 'LI') li = li.parentNode;

          // toggle the state of the node if it was the target of the event
          if (li == node) toggle(node);

        };

      }

      /* Opens or closes the unordered list elements directly within the
       * specified node. The parameter is:
       *
       * node - the node containing the unordered list elements
       */
      function toggle(node){

        // determine whether to open or close the unordered lists
        var open = node.className.match(/(^| )collapsibleListClosed( |$)/);

        // loop over the unordered list elements with the node
        var uls = node.getElementsByTagName('ul');
        for (var index = 0; index < uls.length; index ++){

          // find the parent list item of this unordered list
          var li = uls[index];
          while (li.nodeName != 'LI') li = li.parentNode;

          // style the unordered list if it is directly within this node
          if (li == node) uls[index].style.display = (open ? 'block' : 'none');

        }

        // remove the current class from the node
        node.className =
            node.className.replace(
                /(^| )collapsibleList(Open|Closed)( |$)/, '');

        // if the node contains unordered lists, set its class
        if (uls.length > 0){
          node.className += ' collapsibleList' + (open ? 'Open' : 'Closed');
        }

      }

    }();

推荐的Html是

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Vakram Mohan Help</title>
   <link rel="stylesheet" href="reset.css" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">       

   <script type="text/javascript" src="CollapsibleLists.js"></script>

</head>
<body>
<div>
<UL id="Mainmenu">
    <li>
        <h2><span>Menu</span></h2>
        <ul>
            <li> <span><a onclick=“window.location.reload()”>Home</a></span></li>

            <li><span><a href="#" onclick="return btntest_onclick()">About us</a></span>
                <ul>
                    <li><span><a href=“#”>Domestic</a></span></li>
                    <li><span><a href=“#”>International</a></span></li>
                </ul>
            </li>



        </ul>
    </li><!--Menu end -->
</UL> <!-- Main Menu end -->

</body>
<script language="javascript" type="text/javascript">
function btntest_onclick() 
{
    window.location.href = "http://www.google.com";
}
</script>
<script>
    CollapsibleLists.applyTo(document.getElementById('Mainmenu'));

</script>
</head>
</html>

请注意，我没有使用您的 CSS 文件。一团糟

#para1 {
    text-align: center;
    color: red;
}

这是一个ID选择器

.center {
    text-align: center;
    color: red;
}

这是一个类选择器。

Reset.css 在这里

html, body, header, footer, hgroup, nav, main, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img
{
   margin: 0;
   padding: 0;
   font-size: 100%;
   vertical-align: baseline;
   border: 0;
}