Question

好吧，正如问题所说，我找到了一个代码，使得UL列表显示并隐藏在Jquery中。

这是一个关于jsFiddle的链接，当我直接在HTML上创建一个UL列表时它可以工作但是如果我用javascript动态添加它。 http://jsfiddle.net/p2v0ka1s/4/

我发现问题是Jquery创建了通过单击调用和更改的类名，这些类名不适用于我的动态UL列表，我不知道为什么。你能帮我吗？

这是我动态创建它的代码和不起作用的jquery测试。 http://jsfiddle.net/aytnt4bL/1/ Jquery代码位于javascript代码的按钮处（我在那里添加了它，但我将它作为计算机中的单独源文件。

我也在文本中添加了代码，所以你可以看到它！它与非动态UL列表完美配合，因此我的问题是使其与我的动态创建的UL列表一起使用。谢谢！

 $(function() {
    $('.contactlist').click(function(e) {
      e.stopPropagation();
      var sub = $('> ul', this);
      if(sub.length) {
        if(sub.is(':visible')) {
          sub.hide();
          sub.removeClass('open');
        } else {
          $('.contactlist .open').hide().removeClass('open');
          sub.show();
          sub.parents('ul:not(.contactlist)').addClass('open').show();
          sub.addClass('open');
        }
      }
    });
  });

感谢您的帮助！

Answer 1

您需要使用 event delegation 将事件附加到动态添加的元素：

$('body').on('click','.contactlist',function(e) {
  e.stopPropagation();
  var sub = $('> ul', this);
  if(sub.length) {
    if(sub.is(':visible')) {
      sub.hide();
      sub.removeClass('open');
    } else {
      $('.contactlist .open').hide().removeClass('open');
      sub.show();
      sub.parents('ul:not(.contactlist)').addClass('open').show();
      sub.addClass('open');
    }
  }
});

使用Jquery隐藏并显示动态创建的UL列表？

1 个答案: