Почему часть моей веб-страницы исчезает, если щелкнуть значок определенным образом?

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

Он работает как положено, но ваш background-color для #reveal-5 равен белый , а ваш шрифт белого цвета, вы его не видите.

Замените ваш последний $("#reveal5").toggle() ( строка 114 ) на $("#reveal5").toggle().css("background-color", "#FF2C42"), чтобы увидеть его. Вы можете изменить цвет в соответствии с вашими потребностями.