JavaScript，使用toggle或IF语句单击显示和隐藏

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

在第一个版本的代码中，我有

显示：none设置在服务菜单（servicesMORE）上，并在单击按钮（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";
   }

});

第二个版本的JS：

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

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

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


});

我很感激您的专业知识，因为我似乎无法理解。
对于显示或隐藏，只需使用
显示：无创建简单类属性
并使用jquery进行切换，如下所示

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

如果要隐藏加载时间，只需将
hiddenSER
类指定给标记

编辑：点击注册功能

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

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

});

如果我们能看到你的html可能会有所帮助。隐藏/显示div onclick的一种方法是
myButton.addEventListner（“单击”，函数（）{if（myDiv.style.display==“block”）{myDiv.style.display=“none”；}其他{myDiv.style.display=“block”；}）@cat我必须事先定义“myButton”以及“myDiv”吗？这是使用变量完成的吗？很抱歉提出了一个愚蠢的问题Yep，myButton是一个javascript变量，包含对html元素的引用。您可以使用
document.getElementById（“theIdOfYourDesiredElement”）
从DOM（即浏览器对页面的内部表示）中选择元素。您的代码中已经有这方面的示例（分配给变量
service
和
service click
）。MDN是一个了解更多信息的好网站：是的，但是如何通过单击触发事件？您需要在js文件（在本页面中使用）及其所有设置中编写这段代码
$(".serviceclick").click(function(){

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

});