Javascript 将背景颜色更改回jquery

我正在写一个网页，这个网页有一个菜单，可以在点击时改变背景颜色。我正在用jquery做这件事。现在我只是在做菜单本身。但是我遇到了一个问题。我在列表中的菜单项在我点击它后确实会改变颜色。但在我点击另一个按钮后，我希望之前的更改不会引起回发。有人知道怎么做吗

这是我的密码

<form id="form1" runat="server">
<div>

    <link href="Content/TreeViewCss.css" rel="stylesheet" />
<div class="tree well">
    <ul>
        <li style="width: 100%">
            <span ><i class="icon-folder-open"></i>Parent</span>
            <ul style="width: 100%">
                <li>
                    <span><i class="icon-minus-sign"></i>Child</span>
                    <ul>
                        <li>
                            <span><i class="icon-leaf"></i>Grand Child</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <span><i class="icon-minus-sign"></i>Child</span>
                    <ul>
                        <li>
                            <span><i class="icon-leaf"></i>Grand Child</span>
                        </li>
                        <li>
                            <span><i class="icon-minus-sign"></i>Grand Child</span>
                            <ul>
                                <li>
                                    <span><i class="icon-minus-sign"></i>Great Grand Child</span>
                                    <ul>
                                        <li>
                                            <span><i class="icon-leaf"></i>Great great Grand Child</span>
                                        </li>
                                        <li>
                                            <span><i class="icon-leaf"></i>Great great Grand Child</span>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span><i class="icon-leaf"></i>Great Grand Child</span>
                                </li>
                                <li>
                                    <span><i class="icon-leaf"></i>Great Grand Child</span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span><i class="icon-leaf"></i>Grand Child</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span><i class="icon-folder-open"></i>Parent2</span>
            <ul>
                <li>
                    <span><i class="icon-leaf"></i>Child</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

</div>
</form>

小孩


孙子




小孩


孙子


孙子


曾孙


曾孙


曾孙




曾孙


曾孙




孙子






父母2


小孩

和jquery脚本来更改颜色

    <script>
    $("span").click(function () {

        $(this).css("background-color", "gray");
    });
</script>

$（“span”）。单击（函数（）{
$（this.css（“背景色”、“灰色”）；
});

---

我正在使用asp.net webforms，所有的jquery库都已经包含在内。

您可以使用CSS添加类，然后使用

addClass（）

和

removeClass（）将其切换：

用于添加和删除类：

 $("span").click(function () {
   $("span").removeClass("greybg");
   $(this).addClass("greybg");
 });

.greybg{background-color:gray}

CSS:

 $("span").click(function () {
   $("span").removeClass("greybg");
   $(this).addClass("greybg");
 });

.greybg{background-color:gray}

最简单、最快、最好的方法是利用CSS，只需添加/删除一个类

.BackgroundGray {
    background-color:gray
}

然后在jQuery中添加该类：

$(this).addClass('ButtonGray');

然后，在发生其他事件时删除该类：

$(this).removeClass('ButtonGray');

简单、干净、可扩展。
只需使用这个

JavaScript

$("span").click(function () { // use selector as per your requirement instead of span may be some class
   $('.greybgByJs').removeClass("greybgByJs");
   $(this).addClass("greybgByJs");
});

Css

.greybgByJs{background-color:gray}

这样，只有最后单击的元素才会有灰色背景
这是否意味着当您删除类（“greybg”）时，它会删除所有span上的css“greybg”？@user2948725:是的。或者，您需要修改选择器，使其仅针对所需的span/span。这并不能解决我的问题。我理解你在这里做什么，但问题是我需要在单击另一个跨距后删除应用于上一个跨距的css。在这种情况下，它不会删除以前的背景。我想先去掉应用于另一个跨度的上一个背景色。然后将css应用到当前扳手注意，我的坏，我忘记了一个括号，很抱歉，在我们进行此操作时，我可以问另一件事吗？现在，为什么我要对列表本身应用相同的勾号：即当单击列表时，列表会以这种方式更改背景颜色，我不必折叠或展开行本身。但仅高亮显示我被选中的行。但是，当我试图通过执行$（'li'）.click（function（）{$（'li'）.removeClass（“greybg”）；$（this.addClass（“greybg”）；来应用它时，整个列表都变为灰色。我的意思是，包括它的父级在内，是不是列表属性中的某些东西导致了这种情况？