Question

我从youtube教程（https://www.youtube.com/watch?v=nQK0kz65wpo）获得了一些代码，但我无法找到它无法正常工作的原因。它是一个响应式导航栏。我想点击菜单时将ul（class =＆＃34;显示＆＃34;）更改为（ul class =＆＃34;＆＃34;）。我不明白为什么它不起作用，而且我已经有很长一段时间了。任何帮助都会非常感谢！对不起，我是新来的。

<nav>
   <ul class="showing">
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
   </ul>
   <div class="handle">Menu</div>
</nav>

在脑袋里

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

身体

<script>
      $('.handle').on('click', function(){
            $('nav ul').toggleClass('showing');               
      });
</script>

Answer 1

您应该更改逻辑并添加一些CSS代码：

CSS代码：

.hidding{
    display: none;
}

HTML code：

<nav>
    <ul>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
    </ul>
    <div class="handle">Menu</div>
</nav>

Javascript代码：

$('.handle').on('click', function(){
    $('nav ul').toggleClass('hidding');               
});

Here a JSFiddle!

Answer 2

这似乎有效 http://jsfiddle.net/2c1bc6xp/

你添加了你的CSS吗？

ul { display:none; }
.showing { display:block; }

Answer 3

似乎工作得很好。也许你没有附加到showing类的任何样式，所以你没有意识到它实际上正在工作？

$('.handle').on('click', function(){
            $('nav ul').toggleClass('showing');               
      });

ul.showing {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
   <ul class="showing">
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
       <a href="#"></a><li>1</li></a>
   </ul>
   <div class="handle">Menu</div>
</nav>

Answer 4

您的代码应该有效。你放在标记下面的脚本是不是？如果它在上面它将无法工作，因为javascript将在html甚至呈现之前执行。

2个解决方案 -

将javascript放在页面底部，或将其包装在$（document）.ready中，如下所示。

 $(document).ready(function(){
  $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');               
  });
});

$（document）.ready即使在html之上也能正常工作。

Answer 5

<script>
      var clicked=false;
      $('.handle').on('click', function(){
           if(clicked){
            $('nav ul').addClass('showing');     
          clicked =true;
           }
           else
           {
              $('nav ul').removeClass('showing');     
              clicked =false;
           }
      });
</script>

如何通过单击按钮打开和关闭CSS类

5 个答案: