Question

我是javascript的新手，我正试图隐藏或显示onclick事件的子菜单。这是代码：的javascript：

<script type="text/javascript">
        bool shown = false;
        document.getElementById("test").onclick = SubMenuDisplay();

        function SubMenuDisplay()
        {
            alert("Hello World!");
            if(!show)
            {
                $('subm').show();
                shown = true;
            }
            else
            {
                $('subm').hide();
                shown = false;
            }
        }
</script>

和html：

 <li id="test"><a href="#">Account</a>
     <ul id="subm">
         <li><a href="./account.php#login">Login</a></li>
         <li><a href="./account.php#signup">Sign up</a></li>
     </ul>
 </li>

但是我的onclick事件根本不起作用。

有人可以提供帮助吗？

Answer 1

只需删除()：

即可

document.getElementById("test").onclick = SubMenuDisplay;

您使用函数分配事件而不是函数的返回值。并确保在声明函数后执行此操作，否则可能会引发未定义的错误。

function SubMenuDisplay()
{
  alert("Hello World!");
  if(!show)
  {
    $('subm').show();
    shown = true;
  }
  else
  {
    $('subm').hide();
    shown = false;
  }
}
document.getElementById("test").onclick = SubMenuDisplay;

Answer 2

以下是我认为你想要解决的问题：

<a href="#" id="test" onclick="SubMenuDisplay();">Account</a>

<ul id="subm">
    <li><a href="./account.php#login">Login</a>

    </li>
    <li><a href="./account.php#signup">Sign up</a>

    </li>
</ul>

var shown = false;
$("#subm").hide();

function SubMenuDisplay() {
    alert("Hello World!");
    if (!shown) {
        $('#subm').show();
        shown = true;
    } else {
        $('#subm').hide();
        shown = false;
    }
}

小提琴：http://jsfiddle.net/ryanpcmcquen/wyrogc77/

JavaScript是动态类型的，因此您不需要像bool shown = false;那样声明类型。这可以用var shown = false;替换。 JavaScript会发现这是一个布尔值。

除此之外，您的代码只需要一点点按摩。您将id="test"分配给li元素，只需将其分配给a，并将a设置为li样式，像：

#test {
    list-style-type: bullet;
    list-style-position: inside;
    display: list-item;
}

Answer 3

既然您决定使用jQuery，那就使用它（我的意思是，转到jquery.com并阅读the doc）：

$('#test > a').click(function (e) {
  e.preventDefault();
  $(this).next().toggle();
});

.subm {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="test">
  <a href="#">Account</a>
  <ul class="subm">
    <li><a href="./account.php#login">Login</a></li>
    <li><a href="./account.php#signup">Sign up</a></li>
  </ul>
</li>

如何在js中处理onclick事件

3 个答案: