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

Question

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

只有当第六个框在页面加载后第一个被点击时才会发生这种情况。例如，如果您单击第三个框并继续单击右侧而不是单击六个框的左侧，则效果很好。

请自行尝试，以充分理解问题；单击带有文本“Facebook Networking”的框，然后单击向左箭头，您将看到第三部分完全变白。

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()(第 114 行)替换为 $("#reveal5").toggle() .css("background-color", "#FF2C42") 来查看它。您可以根据需要更改颜色。