Question

我只是为这个问题而苦苦挣扎-已有好几天了。也许我使一个简单的代码过于复杂..但是无论如何，当我单击一个按钮时，我需要显示一些div，第一组代码只会在第二次单击时触发（因为我使用了VAR.style.display），所以我尝试切换，但现在根本不起作用...请告诉我我在做什么错了？

在第一版代码中，我在服务菜单（servicesMORE）上设置了display: none;，只是在单击按钮（serviceclick）时试图更改它。

//serviceclick button opens menus
$(".serviceclick").click(function(){

   var service = document.getElementById("servicesMORE");
   var serviceclick = document.getElementById("scroll_to_explore2");

//more than 768 and services hidden
   if(service.style.display === "none" && document.documentElement.clientWidth > 768){
       document.getElementById("services").style.height = "1600px";
       service.style.display = "block";
       serviceclick.style.display = "none";
   }
//less than 400 and services hidden
    else if(service.style.display === "none" && document.documentElement.clientWidth < 400){
       document.getElementById("services").style.height = "1100px";
       service.style.display = "block";
       serviceclick.style.display = "none";
   }
//less than 400 and services shown
    else if(service.style.display === "block" && document.documentElement.clientWidth < 400){
       document.getElementById("services").style.height = "400px";
       service.style.display = "none";
        serviceclick.style.display = "block";
   }
//less than 768 and services hidden
    else if(service.style.display === "none" && document.documentElement.clientWidth < 768){
       document.getElementById("services").style.height = "1300px";
       service.style.display = "block";
       serviceclick.style.display = "none";
   }
//less than 768 and services shown
    else if(service.style.display === "block" && document.documentElement.clientWidth < 768){
       document.getElementById("services").style.height = "600px";
       service.style.display = "none";
        serviceclick.style.display = "block";
   }
//this covers more than 768 and is the default behavior - services hidden
   else{
       document.getElementById("services").style.height = "800px";
       service.style.display = "none";
       serviceclick.style.display = "block";
   }

});

然后在最新的代码中，我尝试了toggle方法，但是我敢肯定，我会以某种方式滥用它，这就是为什么单击按钮时它什么都不做的原因。

为此，我从服务菜单中删除了CSS属性display: none;，将.hiddenSER类分配给了服务菜单，并将其添加到了CSS中：

.hiddenSER {
    display: none;
}

.showSER{
    display: block;
}

第二版的JS：

$(".serviceclick").click(function(){

   var service = document.getElementById("servicesMORE");
   var serviceclick = document.getElementById("scroll_to_explore2");

   $('#servicesMORE').toggleClass('showSER');


});

感谢您的专业知识，因为我似乎无法弄清。

Answer 1

对于显示或隐藏，只需使用display:none;属性创建简单的类并使用下面的jquery进行切换。

$('#servicesMORE').toggleClass('hiddenSER ');

如果要在加载时隐藏，只需将hiddenSER类分配给标签。

修改：点击即可注册功能

$(".serviceclick").click(function(){

    $('#servicesMORE').toggleClass('hiddenSER ');

});

在Click

1 个答案: