我已经找到了答案,但似乎无法确切地找到需要在这里完成的工作。
我有3个li标签,每个标签都有一个下拉ul。我想更改活动li上的背景颜色,如果我点击另一个li或当前活动的li,则将其删除。到目前为止,我已设法将该类添加到活动li中,但只有通过单击另一个li才能删除它。如果再次点击当前活动的li并关闭它,我需要删除该类。
感谢。
<style>
.add_color {background:#F3A54E;color:#FFF !important;}
</style>
<body>
<ul class="SubMenu">
<li>Shop By Category
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
<li>Shop By Brand
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
<li>Diet Specifics
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
</ul>
</body>
<script>
// sub menu click fuction for drop down menus
$(document).ready(function () {
$("li").click(function () {
//Add and remove background color.
$("ul.SubMenu li").removeClass("add_color");
$(this).toggleClass("add_color");
//Toggle the child but don't include them in the hide selector using .not()
$('li > ul').not($(this).children("ul")
.slideToggle(400)).slideUp(400);
});
});
</script>
答案 0 :(得分:2)
问题是你在调用li
之前从所有toggleClass()
元素中删除了类,这意味着当执行toggleClass()
时,类也会从当前元素中删除,这将导致在课程中添加toggleClass
而不是删除它。
$(document).ready(function() {
$(".SubMenu > li").click(function(e) {
//Add and remove background color.
$("ul.SubMenu li.add_color").not(this).removeClass("add_color");
$(this).toggleClass("add_color");
//Toggle the child but don't include them in the hide selector using .not()
$('.SubMenu li > ul').not($(this).children("ul")
.slideToggle(400)).slideUp(400);
});
});
.add_color {
background: #F3A54E;
color: #FFF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="SubMenu">
<li>Shop By Category
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
<li>Shop By Brand
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
<li>Diet Specifics
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
</ul>
答案 1 :(得分:0)
这里的问题是您在删除它后立即重新添加该类。为了避免这种情况:
$(document).ready(function () {
$("li").click(function () {
var $this = $(this);
//Add and remove background color.
$("ul.SubMenu li").not($this).removeClass("add_color");
$this.toggleClass("add_color");
//Toggle the child but don't include them in the hide selector using .not()
$('li > ul').not($(this).children("ul")
.slideToggle(400)).slideUp(400);
});
});
答案 2 :(得分:0)
首先删除课程
$("ul.SubMenu li").removeClass("add_color");
然后你切换它
$(this).toggleClass("add_color");
当然不行。改变那个顺序。
干杯 [R
答案 3 :(得分:0)
$(document).ready(function () {
$("li").click(function () {
//Add and remove background color.
$("ul.SubMenu li").each(function (index, element) {
$(this).removeClass("add_color");
});
$(this).toggleClass("add_color");
//Toggle the child but don't include them in the hide selector using .not()
$('li > ul').not($(this).children("ul")
.slideToggle(400)).slideUp(400);
});
});
希望这有帮助
答案 4 :(得分:0)
我认为这正是您所寻找的,代码中的注释解释了正在发生的事情:
// sub menu click fuction for drop down menus
$(document).ready(function() {
// Start with submenus not showing
$('li > ul').hide();
// Handle clicks
$("li").click(function() {
var $this = $(this);
// Do we have the class?
if ($this.hasClass("add_color")) {
// Yes, remove it and make sure our children are up
$this.removeClass("add_color");
$this.children("ul").slideUp(400);
} else {
// No, add it, make sure no other items have it,
// make sure all other children are up, and that
// ours are down
$this.addClass("add_color");
$("ul.SubMenu li").not(this).removeClass("add_color");
$('li > ul').not($this.children("ul")
.slideDown(400)).slideUp(400);
}
});
});
.add_color {
background: #F3A54E;
color: #FFF !important;
}
<ul class="SubMenu">
<li>Shop By Category
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
<li>Shop By Brand
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
<li>Diet Specifics
<ul>
<li>some text</li>
<li>some text</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
答案 5 :(得分:0)
我没有动画制作了[plunker] [1]。您必须单击父li才能切换颜色。
[1]: http://plnkr.co/edit/TiWxVD6o2z0YATkQtiEK?p=preview