时间戳

首页 > 解决方案 > 如何将 .toggleClass() 与 .appendTo() 结合使用？

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

问题描述

我将一个新类附加到一个 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");
    })
});

标签： javascriptjqueryhtmlcss

解决方案

我想完成另一个点击“a.header-login”删除容器“.sub-menu”。现在，它总是在您单击“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();
    }
  })
});

话虽如此，如果您始终.sub-menu在页面的 HTML 中包含 ，但默认情况下使用 CSS 隐藏它，您可以使这个逻辑更简单。在这种情况下，您的 jQuery 将成为一个简单的调用toggle()：

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

推荐阅读