第一次单击后，JQuery显示和隐藏以及类名称不会显示

Question

我是Jquery的新手，当我点击元素<li class="show">Categories</li>并将类名从show更改为close时，我一直在尝试显示和隐藏类别列表。我可以在第一次点击时更改类别和类名，但在第一次点击后不会在第二次点击或任何其他点击时更改。

HTML

<nav>
    <ul id="nav">
        <li class="show">Categories</li>
    </ul>
</nav>

<nav id="categories">
    <ul>
        <li><a href="">Category 1</a></li>
        <li><a href="">Category 2</a></li>
        <li><a href="">Category 3</a></li>
        <li><a href="">Category 4</a></li>
    </ul>
</nav>

JQuery的

$('.show').click(function(){
    $('#categories').show();
    $(this).addClass('close').removeClass('show');
});  

$('.close').click(function(){
    $('#categories').hide();
    $(this).addClass('show').removeClass('close');
});

Answer 1

目前您使用的是“直接”绑定，它只会在您的代码进行事件绑定调用时附加到页面上存在的元素。

在动态生成元素或操作选择器（如删除和添加类）时，您需要使用Event Delegation委托事件方法{/ 3}}。

即

$(document).on('event','selector',callback_function)

实施例

$(document).on('click', ".show", function(){
    //Your code
    $('#categories').show();
    $(this).addClass('close').removeClass('show');
});
$(document).on('click', ".close", function(){
    //Your code
    $('#categories').hide();
    $(this).addClass('show').removeClass('close');
});

然而，对于您的特定方案，更好的解决方案是使用

添加另一个类和绑定事件

添加课程

<li class="categories show">Categories</li>

修改脚本

$('.categories').click(function(){
    $(this).toggleClass('show close');
    $('#categories').toggle($(this).hasClass('show'));
});

$(function() {
  $('.categories').click(function() {
    $(this).toggleClass('show close');
    $('#categories').toggle($(this).hasClass('show'));
  }).click();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="nav">
    <li class="show categories">Categories</li>
  </ul>
</nav>

<nav id="categories">
  <ul>
    <li><a href="">Category 1</a>
    </li>
    <li><a href="">Category 2</a>
    </li>
    <li><a href="">Category 3</a>
    </li>
    <li><a href="">Category 4</a>
    </li>
  </ul>
</nav>

Answer 2

您需要对动态添加/更改的元素使用 。

$(document).on('click', '.show', function(){
    $('#categories').show();
    $(this).toogleClass('close show');
});  

$(document).on('click', '.show', function(){
    $('#categories').hide();
    $(this).toogleClass('close show');
});