Question

我尝试构建节目并隐藏导航以节省更多空间。但毕竟我做了，它变得如此跳跃。我可以删除show类并添加hide类，但之后hide类什么都不做。请帮忙。

<script>
    $(".servicesShowLink").click(function(){
            document.getElementById("servicesShow").className = "";
            document.getElementById("servicesShow").className = "servicesHideLink";
    });
    $(".servicesHideLink").click(function(){
            document.getElementById("servicesShow").className = "";
            document.getElementById("servicesShow").className = "servicesShowLink";
    });
    </script>

Answer 1

选择器被计算一次并生成一组元素，然后事件处理程序绑定到那些元素，但不知道有关用于获取这些元素的选择器的任何信息。因此，即使类更改，元素也不会，事件处理程序保持原样。

您可以使用event delegation获得所需内容：

inf

我利用这个机会建议更多jQuery风格的代码而不是$(document).on('click', ".servicesShowLink", function(){ $("#servicesShow").removeClass("servicesShow"); $("#servicesShow").addClass("servicesHideLink"); }); $(document).on('click', ".servicesHideLink", function(){ $("#servicesShow").removeClass("servicesHideLink"); $("#servicesShow").addClass("servicesShow"); });调用，等等。

Answer 2

使用DomElement.classlist.toggle("servicesHideLink");可以通过一个onclick事件解决您的问题。我怀疑问题是，当你点击它，它切换，并添加了一个新的事件监听器，它被解雇了。因此，使用一个事件监听器是有意义的。

Javascript添加和删除类不会工作

2 个答案: