Question

我在html的头部有这个脚本：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    $(function () {
        $('.nav-toggle').on('click',function(){
            $('.mainnav').toggleClass('open');
        });
    });
</script>

应在以下情况下触发：

<header>
    <img class="nav-toggle" src="static/images/menunav.png" style="cursor: pointer;">
</header>

点击此图片。

并在以下位置打开子类：

<ul class="text mainnav">
        <li>Home</li>
        <li>Projects</li>
        <li>Techniques</li>
        <li>About me</li>
    </ul>

但它不会解雇.open课程？我在这里做错了什么（第一次使用jquery用户）。

CSS：

.nav-toggle {
  float: right;
  margin-right: 70px;
}

    .mainnav{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #222;
      text-align: center;
      list-style: none;
      display: inline-block;
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }

    .mainnav.open {
      transform: translateX(50%);
}

Answer 1

我猜问题出在html中。尝试拆分

<script src="[JQuery CDN]"></script>
<script>
$(function(){ ... });
</script>

Jquery点击监听器没有触发（html，css，jquery）

1 个答案: