javascript - 更改背景颜色回jquery

Question

我正在写一个网页，这个网页有一个菜单，当被点击时它的背景颜色会改变。我正在用 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>

和改变颜色的jquery脚本

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

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

我正在使用 asp.net webforms 并且已经包含了所有 jquery 库。

Answer 1

您可以使用 CSS 添加类，然后使用 addClass() 和 removeClass() 切换它:

用于添加和删除类:

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

CSS:

.greybg{background-color:gray}