Question

在用户使用JQuery点击页面上的单独元素后，如何显示元素？

我创建了一个包含以下HTML的侧边菜单：

<li id="navicon">
  <a href="" class="nav">
    <img src ="/assets/navicon-round.svg/" />
  </a>
</li>  
<ul class="side-categories">
    <li><a href="">CSS</li></a>
    <li><a href="">HTML</li></a>
    <li><a href="">JS/Jquery</li></a>
    <li><a href="">Miscellaneous</li></a>
</ul>

我将.side-categories设置为display:none

现在，我希望能够在点击.side-categories

时显示#nav

我刚开始学习JQuery，这就是我想出的。然而，它没有用。我希望有人可以告诉我这里做错了什么。

$( document ).ready(function() {
     $('#nav').on('click')event(function()) {
     event(showNavBar);
          $('.side-categories').show();
    });
});

Answer 1

一个好方法是使用类隐藏侧边栏菜单。

在你的CSS中：

.hide { 
   display: none;
}

在你的HTML中:(如果你想要，可以删除<a>，因为jQuery可以检测到任何元素的点击）

<li id="navicon">
  <img class="nav" src ="/assets/navicon-round.svg/" />
</li>  
<ul class="side-categories hide">
  <li><a href="#">CSS</a></li>
  <!-- More menu items -->
</ul>

然后在你的jQuery中：

$(function() {     
  $('.nav').on('click', function(e) {
    e.preventDefault();
    $('.side-categories').toggleClass('hide');
  });
});

这是一种非常简单的方法，允许用户通过单击相同的按钮再次隐藏侧面菜单 - 这通常是预期的行为。

另一个好处是你可以保持你的功能和风格分开。

Answer 2

<强> Working fiddle

你应该替换：

event(showNavBar);

通过：

e.preventDefault();

完整代码：

 $(function() {     
    $('.nav').on('click',function(e) {
        e.preventDefault();
        $('.side-categories').show();
    });
});

Answer 3

这是HTML代码：

＆＃13;

 $(function() {     
    $('.nav').on('click',function(e) {
        e.preventDefault();
        $(".side-categories").slideToggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <li id="navicon">
      <a href="" class="nav">
        <img style="height:40px;position:absolute;" src ="data:image/gif;base64,R0lGODlhZABkAIABAIeHh////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxRTgzNTA3NzBFMzExRTM5MTJGREEwRkJDOTMyN0M3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxRTgzNTA4NzBFMzExRTM5MTJGREEwRkJDOTMyN0M3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjFFODM1MDU3MEUzMTFFMzkxMkZEQTBGQkM5MzI3QzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjFFODM1MDY3MEUzMTFFMzkxMkZEQTBGQkM5MzI3QzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAZABkAAACtIyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1eANSq9YrNardZGvcLDmO94rJ5PDurz+S1+9t+y9Gyuf0qzev3/L7/DxgoOFh3ZxhnKIeY6LbIqOb4aBYpKUZZCUaoucnZ6fkJGio6eoDZmGYKiZo6ucpq6fqaGSvLdVlrRaq7y9vr+wscLDxMXGx8jJysvMzc7PwMHU1aAAA7" />
      </a>
    </li>  
    <ul class="side-categories" style="display:none">
        <li><a href="">CSS</li></a>
        <li><a href="">HTML</li></a>
        <li><a href="">JS/Jquery</li></a>
        <li><a href="">Miscellaneous</li></a>
    </ul>

＆＃13;

现场演示：https://jsfiddle.net/4zuL5bmt/

Answer 4

<强> HTML

<li id="navicon">
  <a href="" class="nav">
    <img src ="/assets/navicon-round.svg/" />
  </a>
</li>  
<ul class="side-categories" style="display:none">
    <li><a href="">CSS</li></a>
    <li><a href="">HTML</li></a>
    <li><a href="">JS/Jquery</li></a>
    <li><a href="">Miscellaneous</li></a>
</ul>

替换您的JQuery

  $(function() {     
        $('#navicon').click(function() {  // Change # instead of .
        $(".side-categories").show();
      });
   });

或

$(function() { $('#navicon').on('click',function() { $(".side-categories").show(); }); });

希望它有效.....

如何在点击时显示菜单

4 个答案: