javascript - 如何将 .toggleClass() 与 .appendTo() 结合使用？

Question

我将一个新类附加到 HTML 容器。如何通过单击菜单按钮来打开/关闭它？用 JavaScript 编写更复杂的 HTML 代码甚至是“最佳实践”，还是您更喜欢另一种方法？因为我计划对更多容器执行此操作。谢谢!

$(document).ready(function() { 
    $( "a.header-login" ).click(function() {
        $("<div class='sub-menu'>" +
        "<h2>Hi x!</h2>"+ 
        "<a class='item' href='#'>Logout</a>"+ 
        "</div>")
        .appendTo("header .header-r");
    })
});

Answer 1

I want to accomplish that another click on "a.header-login" deletes the container ".sub-menu". Now, it is always generated when you click "a.header-login"

在这种情况下，您需要添加一个条件来检查该元素是否已经存在。如果它不创建它，如果它确实删除它。

jQuery(function() {
  $('a.header-login').click(function() {
    var $target = $('header .header-r .sub-menu');
    if ($target.length === 0) {
      $('<div class="sub-menu"><h2>Hi x!</h2><a class="item" href="#">Logout</a></div>').appendTo('header .header-r');
    } else {
      $target.remove();
    }
  })
});

也就是说，如果您始终在页面的 HTML 中包含 .sub-menu 但默认情况下使用 CSS 隐藏它，则可以使这个逻辑更加简单。在这种情况下，您的 jQuery 将变成对 toggle() 的简单调用:

jQuery(function() {
  $('a.header-login').click(function() {
    $('header .header-r .sub-menu').toggle();
  })
});