我试图在div上创建一个类然后删除它。首先，我认为就像我之前使用toggleClass一样，但这似乎不起作用，因为我将一个类添加到 ID 而不是 Class < / em>的。我希望我的标题在课程中也有黑色背景： 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年后回来了。
感谢您查看此问题！
答案 0 :(得分：3)
您对DOM元素的理解似乎含糊不清。让我们分解吧。
我正在尝试在div上创建一个类，然后将其删除。
这里的 it 是什么，你想删除什么？类或元素？
...，因为我正在为ID而不是Class添加一个类。
这在技术上是不可能的。您不能将类添加到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课程我想删除/删除.headerbg<header>
这样做：
/*
* place the following inside an instance of
* $(document).ready(function(){...})
*/
$('.hamburger').on('click', function(){
$('header').toggleClass('headerbg');
})
注意：
$(selector).click(function(){...})是$(selector).on('click', [child-selector,] function(){...})。我个人建议将后者用于所有事件绑定函数，以开发一致的绑定模式。从长远来看，它有助于维护代码。此外，它允许使用可选的子选择器参数绑定尚未在DOM中的元素。例如，如果您想在DOM中创建.hamburger之前进行绑定，则可以使用以下语法：$(window).on('click', '.hamburger', function(){
$('header').toggleClass('headerbg');
})
主要区别在于第一个语法在绑定完成时找到的.hamburger的每个实例上绑定一个事件侦听器（在您的情况下为document.ready）。
第二种语法仅在window对象上绑定一个事件，并在click时评估是否从具有类.hamburger的元素内部触发。这意味着如果您有1k个带有类.hamburger的元素，则不会在每个元素上绑定一个事件（导致1k个侦听器）。此外，它具有很大的优势，它将在绑定完成后处理添加到页面的元素（因为评估是在click事件，而不是ready事件。
为了更加精确和清晰，这里有两种语法选择。
1。选择：
.click(function(){...}) .on('click', function(){...}) 我 总是 排在第二位，因为它在所有事件监听器中都是一致的（我把它作为第一个参数放在哪里，而不是click - 此外，它允许同时绑定多个事件类型：.on('click tap swipe', function(){...})）
2. 选择
$(child-selector).on('click', function(){...}) $(parent-selector).on('click', child-selector, function(){...})。 如果只有child-selector的一个实例，并且在您进行绑定时它已经在DOM中，请先选择。如果child-selector有多个实例，并且您希望每个实例都在parent-selector内，请使用秒。
从理论上讲，你希望尽可能少的事件监听器，所以不是2个监听器，每个孩子一个最好在父母上有一个监听器。
此外，最佳做法是尽可能使用最小的父选择器。例如，如果您知道所有child-selector将始终包含在包含您的内容的div中 - 例如$('#main') - 最好绑定在该容器上而不是$('<body>')或{{ 1}}。这将使您的代码无法针对$(window)之外触发的点击事件进行评估，这在理论和实践中都会使您的网页更快更轻，从而获得更好的用户体验。
答案 1 :(得分：1)
在您的#header中，您应该切换headerbg，而不仅仅是添加它：
然后你的jquery必须是：
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
if($("#header").hasClass("headerbg")){
$("#header").removeClass("headerbg");
}
else
{
$("#header").addClass("headerbg");
}
});
});
答案 2 :(得分：0)
如果您需要添加ID的样式，则应通过attr函数传递它。像这样
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
$("header").addClass('headerbg');
$("header").attr('id','#header');
});
});
你可以像这样删除它
$("header").attr('id','');
这样你可以切换它