时间戳

首页 > 解决方案 > 为什么以特定方式单击图标时我的网页部分会消失？

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

问题描述

我的代码中有一个错误；在网站的第三部分有 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

任何帮助将不胜感激。

标签： javascriptjqueryhtmlcss

解决方案

It does work as expected but your background-color for #reveal-5 is white, and your font being white you do not see it.

Replace your last $("#reveal5").toggle() (line 114) by $("#reveal5").toggle().css("background-color", "#FF2C42") to see it. You can change the color to your needs.

推荐阅读