javascript - 为什么在 Jquery 中 "on click"只更新一次？然后第二次在 $(this) 上显示 "undefined"？

Question

我只是在创建一个导航菜单，并有一个基本的无序列表，其中包含一个“子菜单”。这是 Jquery。 “事件”类和 if 语句的原因是，如果选择列表中的另一个项目，我希望 slider 保持打开状态，这样它就不会在每次迭代时关闭并再次打开。

代码中对我来说有问题的部分在这里。

$('.slider').html( $(this).find('ul') );

主要问题是 on('click',) 仅在第一次被点击时更新。第二次单击菜单中的另一个项目时，它不会使用新选择更新自身，因此不会显示新的子菜单列表？控制台日志显示它是未定义。不过应该是第一次吧？

我不明白为什么会这样或背后的原因!逻辑告诉我第一次发生的同样的事情应该继续发生，因此有效？!在我用我的额头在墙上打个洞之前，感谢您的帮助!

$(document).ready(function() {

    $('ul > li > ul').hide();
    $('.slider').hide();

    // Menu
    $('.menuNav > ul > li').on('click', function() {

        // if active
        if ( $(this).hasClass('active') ) {
            $(this).parents().children().removeClass('active');
            $('.slider').hide('slide', 200);
        }

        // if unactive
        else {
            $(this).addClass('active');
            $('.slider').show('slide', 200);
            $(this).siblings().removeClass('active');
            // Show related list
            $('.slider').html( $(this).find('ul') );

        }

    });
});

HTML

<div class="menuNav">
  <ul>

    <li><span>item_1</span>
      <div class="sub_position">
          <ul>
            <li>sub-item_1-1</li>
            <li>sub-item_1-2</li>
            <li>sub-item_1-3</li>
            <li>sub-item_1-4</li>
          </ul>
      </div>
    </li>

    <li><span>item_2</span>
        <div class="sub_position">

      <ul>
        <li>sub-item_2-1</li>
        <li>sub-item_2-2</li>
        <li>sub-item_2-3</li>
        <li>sub-item_2-4</li>
      </ul>
      </div>
    </li>

....等等

  </ul>
</div>

Answer 1

您的问题可能是因为您实际上将整个子菜单移到了 .slider 中。 , 而不是克隆它。这意味着子菜单会在第一次点击时从原来的菜单中移除，再次点击则意味着嵌套的子菜单选择器$(this).find('ul')将返回一个空集。

为避免此问题，我建议您执行以下操作:

• 将子菜单的 outerHTML 附加到 slider ，即 $(this).find('ul')[0].outerHTML
• 如果您想在完成后隐藏菜单中的子菜单，只需在适当的时候隐藏/取消隐藏它即可。

您可以随时使用 $(this).find('ul').html()为了同样的效果，但请记住 <li>元素必须是 <ul> 的直接子元素.因此，我们还需要克隆 outerHTML(即复制 <ul>)以确保将有效的 HTML 注入(inject) slider 。

$(document).ready(function() {

  $('ul > li > ul').hide();
  $('.slider').hide();

  // Menu
  $('.menuNav > ul > li').on('click', function() {

    // if active
    if ($(this).hasClass('active')) {
      $(this).parents().children().removeClass('active');
      $('.slider').hide('slide', 200);
    }

    // if unactive
    else {
      $(this).addClass('active');
      $('.slider').show('slide', 200);
      $(this).siblings().removeClass('active');
      // Show related list (changed: now we use HTML's native outerHTML object
      $('.slider').html($(this).find('ul')[0].outerHTML);

    }

  });
});

.slider {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="slider"></div>
<div class="menuNav">
  <ul>

    <li><span>item_1</span>
      <div class="sub_position">
        <ul>
          <li>sub-item_1-1</li>
          <li>sub-item_1-2</li>
          <li>sub-item_1-3</li>
          <li>sub-item_1-4</li>
        </ul>
      </div>
    </li>

    <li><span>item_2</span>
      <div class="sub_position">

        <ul>
          <li>sub-item_2-1</li>
          <li>sub-item_2-2</li>
          <li>sub-item_2-3</li>
          <li>sub-item_2-4</li>
        </ul>
      </div>
    </li>
  </ul>
</div>