單擊時使用切換或IF語句顯示和隱藏JavaScript

Question

我只是為這個問題而苦苦掙扎-已有好幾天了。 也許我使一個簡單的代碼過於復雜..但是無論如何，當我單擊一個按鈕時，我需要顯示一些div，第一組代碼只會在第二次單擊時觸發（因為我使用了VAR.style.display），所以我嘗試切換，但現在根本不起作用...請告訴我我在做什么錯？

在第一版代碼中， 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";
   }

});

然后，在最新的代碼中，我嘗試了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;創建簡單的類即可display:none; 屬性，然后使用jquery進行切換，如下所示。

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

如果要在加載時隱藏，只需將hiddenSER類分配給標簽。

編輯：點擊注冊功能

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

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

});