![hamburger]( "hamburger")
我正在尝试在div上创建一个类，然后将其删除。首先，我认为就像以前使用toggleClass一样，但这似乎不起作用，因为我是在ID而不是Class中添加一个类。我希望我的标头在类的顶部也有黑色背景：headerbg。另外，我对汉堡菜单的颜色还有一个小问题。我想在按下汉堡包菜单时在班级上切换白线的颜色（用橙色代替白色）。My live version where it is on, works only when 1024px or smaller我的Javascript$(document).ready(function(){ $(".hamburger").click(function(){ $(".hamburger").toggleClass("closed"); $(".menu").toggleClass("show"); $("header").addClass('headerbg'); });});我的CSS .hamburger div{ height: 3px; background-color: white; margin: 5px 0; border-radius: 25px; transition: 0.3s;}.hamburger { width: 30px; display: none; margin: 3em 3em 3em 0; float: right; transition: all 0.75s 0.25s;}.one { width: 30px;}.two { width: 20px;}.three { width: 25px;}.hamburger:hover div { width: 30px;}.hamburger.closed { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}@media only screen and (max-width: 1024px) { .menu { width: 100%; background: #000; margin: 0; display: none; } .show { width: 100%; background: #000; margin: 0; display: block;} .headerbg { background: #000; } .hamburger { display: block; }}如果有人可以带领我树立一个好榜样，甚至更好地帮助我，我将不胜感激！从HTML / CSS中断了2.5年后才回来。感谢您查看问题！ 最佳答案 您对DOM元素的理解似乎很模糊。让我们分解一下。 我正在尝试在div上创建一个类，然后将其删除。这是什么，您要删除什么？类还是元素？ ...，因为我要向ID添加类而不是类。从技术上讲这是不可能的。您不能将类添加到ID中，也不能将ID添加到类中。您只能添加/删除/修改DOM元素的id属性，并且可以将类添加/删除到DOM元素的className属性，在class属性的标记中引用该类。为了简短起见，使用jQuery，您可以按ID，按类，按属性或按属性值（实际上，通过与该元素匹配的任何有效CSS选择器）选择一个或多个元素，然后可以应用.toggleClass() ，.addClass()或.removeClass()方法（或任何其他jQuery方法）应用于该元素（或集合中的每个元素，如果它们不止一个）。为了向您说明问题，这是当前代码的作用：$(document).ready(function(){ /* when all the DOM has finished building... */ $(".hamburger").click(function(){ /* do the following when an element with class "hamburger" is clicked: */ $(".hamburger").toggleClass("closed"); /* toggle class `closed` on all elements with class "hamburger" (not only on clicked one!) */ $(".menu").toggleClass("show"); // toggle class `show` on all elements with class "menu" $("header").addClass('headerbg'); // add class "headerbg" to all <header> elements in page }); });根据OP注释添加： 首先，当我单击.headerbg类时，我想在<header>上添加类.hamburger，然后当我再次单击.hamburger类时，我要删除/删除这样可以做到：/* * place the following inside an instance of * $(document).ready(function(){...}) */$('.hamburger').on('click', function(){ $('header').toggleClass('headerbg');})注意：.headerbg是的快捷方式<header>。我个人建议将后者用于所有事件绑定功能，以开发出一致的绑定模式。从长远来看，在维护代码时会有所帮助。此外，它还可以通过使用可选的子选择器参数来绑定尚未包含在DOM中的元素。例如，如果要在DOM中创建$(selector).click(function(){...})之前进行绑定，则可以使用以下语法：$(window).on('click', '.hamburger', function(){ $('header').toggleClass('headerbg');})主要区别在于，第一种语法在完成绑定时在它找到的每个$(selector).on('click', [child-selector,] function(){...})实例上绑定了一个事件侦听器（在您的情况下为.hamburger）。第二种语法仅绑定.hamburger对象上的一个事件，并在document.ready时刻评估是否从类window的元素内部触发了该事件。这意味着，如果您具有类别click的1k元素，则无需在每个元素上绑定一个事件（导致1k侦听器）。同样，它具有很大的优势，它将在绑定完成后添加到页面上的元素上工作（因为评估是在.hamburger事件而不是在.hamburger事件上完成的。为了更加精确和清楚，这里有两个语法选择。1.选择：clickready我总是争取第二，因为它在所有事件侦听器中都是一致的（我作为第一个参数使用的是什么，而不是.click(function(){...})无关紧要-而且，它允许一次绑定多个事件类型：.on('click', function(){...}) ）2.选择click.on('click tap swipe', function(){...})。如果只有$(child-selector).on('click', function(){...})的一个实例，并且在进行绑定时该实例已经在DOM中，请首先选择。如果$(parent-selector).on('click', child-selector, function(){...})的实例不止一个，并且您希望每个实例都出现在child-selector中，请使用第二个实例。从理论上讲，您想要尽可能少的事件侦听器，因此每个孩子一个，而不是2个侦听器，最好在父级上只有一个侦听器。同样，最佳实践是使用最小的父选择器。例如，如果您知道所有child-selector总是包含在保存内容的div中（例如parent-selector），则最好将其绑定在该容器上，而不是绑定在child-selector或$('#main')上。这将使您的代码不会针对在$('<body>')之外触发的click事件进行评估，这从理论上和实践上都可以使您的页面更快更轻，从而获得更好的用户体验。 09-18 17:25