当图标以特定方式单击时，为什么我的网页的一部分消失了

Question

我的代码中有一个错误；在网站的第三部分中，有6个盒子。当页面首次加载时，如果用户单击六个框，然后单击左箭头，第三部分将完全白色。

这仅在页面加载后首次单击第六个框时才发生。如果您说，请单击第三个框，然后继续单击右键，而不是单击六个框的左键，然后效果很好。

请自己尝试一下，以充分理解这个问题；单击带有文字" Facebook网络"的框，然后单击左箭头，您将看到第三部分完全白色。

https://codepen.io/joyfulcoding/pen/ezxowl

我需要另一只眼睛才能发现导致此错误的原因。最初，我怀疑这与我使用jQuery有关，因此我竭尽全力从头开始重写它，以查看是否可以复制相同的代码。我能够复制相同的代码，不幸的是，该错误仍然存在。

$(document).ready(function() {
  $("#menu").on('click', function() {
    $("#icon").toggleClass("fa-times white-icon");
  });
  $("#fbAdCampaigns").on('click', function(){
    $("#boxes-container").toggle();
    $("#reveal1").toggle().css("background-color" ,"#FF2C42");
  });
  $("#close1").on("click", function() {
    $("#boxes-container").toggle();
    $("#reveal1").toggle();
  })
  $("#arrowR1").on("click",function(){
    $("#reveal1").toggle();
    $("#reveal2").toggle();
  })
  $("#fbPageDesign").on('click', function(){
    $("#boxes-container").toggle();
    $("#reveal2").toggle().css("background-color" ,"#4C27B3");
  });
  $("#close2").on("click", function() {
    $("#boxes-container").toggle();
    $("#reveal2").toggle();
  })
  $("#arrowR2").on("click", function() {
    $("#reveal2").toggle();
    $("#reveal3").toggle().css("background-color" , "#00E3B5");
  })
  $("#arrowL2").on("click", function() {
    $("#reveal2").toggle();
    $("#reveal1").toggle();
  })
  $("#fbManagement").on('click', function(){
    $("#boxes-container").toggle();
    $("#reveal3").toggle().css("background-color" ,"#00E3B5");
  });
   $("#close3").on("click", function() {
    $("#boxes-container").toggle();
    $("#reveal3").toggle();
  })
  $("#arrowR3").on("click",function() {
    $("#reveal3").toggle();
    $("#reveal4").toggle().css("background-color" , "#00E3B5" );
  })
  $("#arrowL3").on("click", function() {
    $("#reveal3").toggle();
    $("#reveal2").toggle();
  })
  $("#fbOutreach").on('click', function(){
    $("#boxes-container").toggle();
    $("#reveal4").toggle().css("background-color" ,"#00E3B5");
  });
   $("#close4").on("click", function() {
    $("#boxes-container").toggle();
    $("#reveal4").toggle();
  })
  $("#arrowR4").on("click",function() {
    $("#reveal4").toggle();
    $("#reveal5").toggle().css("background-color", "#FF2C42")
  })
  $("#arrowL4").on("click",function() {
    $("#reveal4").toggle();
    $("#reveal3").toggle().css("background-color", "#00E3B5")
  })
    $("#fbCompetitionApps").on('click', function(){
    $("#boxes-container").toggle();
    $("#reveal5").toggle().css("background-color" ,"#FF2C42");
  });
   $("#close5").on("click", function() {
    $("#boxes-container").toggle();
    $("#reveal5").toggle();
  })
  $("#arrowR5").on("click",function() {
    $("#reveal5").toggle();
    $("#reveal6").toggle().css("background-color", "#4C27B3")
  })
    $("#arrowL5").on("click",function() {
    $("#reveal5").toggle();
    $("#reveal4").toggle().css("background-color", "#00E3B5")
  })
  $("#fbNetworking").on('click', function(){
    $("#boxes-container").toggle();
    $("#reveal6").toggle().css("background-color" ,"#4C27B3");
  });
   $("#close6").on("click", function() {
    $("#boxes-container").toggle();
    $("#reveal6").toggle();
  })
  $("#arrowL6").on("click", function() {
    $("#reveal6").toggle();
    $("#reveal5").toggle();
  })

});

在此处查看我的代码的其余部分：

https://codepen.io/joyfulcoding/pen/ezxowl

任何帮助将不胜感激。

Answer 1

它确实可以按预期工作，但是#reveal-5的background-color是 white ，而您的字体为白色，您看不到它。

用$("#reveal5").toggle().css("background-color", "#FF2C42")替换您的最后一个$("#reveal5").toggle()(行114 (以查看它。您可以根据需要更改颜色。