点击功能中的点击功能不起作用

Question

我正在构建一个网站，但我正在尝试清理一些错误。目前，当“bio”按钮可切换时，当它可见时，它会隐藏中间容器中的所有内容，而当它隐藏时，徽标容器的宽度和高度为 100%。

不过，当我点击顶部或底部导航链接时，理想情况下我希望徽标图像容器和导航副本容器可见，但目前只有徽标容器可见。

$(document).ready(function() {
$("#bio-text-button").click(function(){
    $("#bio-container").toggle();
    if($(this).is(':visible')) { 
        $("#logo-img-container").toggle();
    $("#nav-copy-container").hide();
    }
    else if($(this).is(':hidden')) {
    $("#nav-copy-container").show();
    $("#nav-copy-container").animate({
    width: "100%",
  }, 1500 )  
   $("#logo-img-container").animate({
    width: "100%",
  }, 1500 )
    $("#logo-img-container").show();
    }

});
    });

#main-container {
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 110vw;
  height: 100vh;
  -webkit-transition: 1s;
   transition: 1s;
}

#content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

#top-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-flow: wrap;
  slign-content: center;
  align-items: center;
  height: 10%;
  width: 90%;
}

#top-nav-link-container {
  margin-left: 10px;
  margin-right: 10px;

}

#top-nav-link-container:hover {
  -webkit-transition: 1s;
   transition: 1s;
  transform: skewX(-20deg);
}

#top-nav-link {
  font-size: 20px;
  color: black;
  cursor: pointer;
}

#middle-container {
  display: flex;
  border: 2px solid black;
  height: 80%;
  width: 90%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
  -webkit-transition: 1s;
  transition: 1s;
  align-items: center;
  overflow: auto;
}

#logo-img-container {
  height: 100%;
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}

#logo-img {
  height: 100%;
  width: 100%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 70%;
}

#nav-copy-container {
  display: none;
  height: 100%;
  width: 40%;
  border-left: 2px solid black;
  overflow: auto;
  cursor: pointer;
  justify-content: center;
  text-align: center !important;
  align-self: center;
  align-content: center;
  align-items: center;
}

#bio-container {
  display: none;
  height: 100%;
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
} 

#bio-container-copy {
  font-size: 20px;
  color: black;
  margin: 20px;
}

#bio-name {
  -webkit-transition: 1s;
   transition: 1s;
  transform: skewX(-20deg) !important;
}

#bottom-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-flow: wrap;
  slign-content: center;
  align-items: center;
  height: 10%;
  width: 90%;
}

#bottom-nav-link-container {
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">
    <div id="content-container">
      <div id="top-nav-container">
        <div id="top-nav-link-container">
            <div  id="top-nav-link" class="nav-link-one"> therapy </div>
        </div>
            <div id="top-nav-link-container">
          <div  id="top-nav-link" class="nav-link-extra"> support </div>
        </div>
        <div id="top-nav-link-container">
            <div id="top-nav-link" class="nav-link-two"> meditation </div>
        </div>
        <div id="top-nav-link-container">
            <div id="top-nav-link" class="nav-link-three"> covid-19 support </div>
        </div>
        <div id="top-nav-link-container">
            <div id="top-nav-link" class="nav-link-four"> spiritual practitioners </div>
        </div>
        <div id="top-nav-link-container">
            <div id="top-nav-link" class="nav-link-five"> food </div>
        </div>
        <div id="top-nav-link-container">
            <div id="top-nav-link" class="nav-link-six"> collectives & community spaces </div>
        </div>
    </div>
    <div id="middle-container">
        <div id="logo-img-container" class="ripple">
            <div id="logo-img"></div>
          
        </div>
        <div id="bio-container">
            <div id="bio-container-copy">
              An ever-evolving library of resources for mental health support, healing, and wellness centering BIPOC & LGBTQ communities.
Solace was created out of the deep & immediate need to decolonize healing & share accessible methods of support for marginalized folks.
            <br><br>
             <i>Solace is not affiliated with any of the resources listed.</i>
            <br><br>
             <a href="https://www.instagram.com/girl_asturias/?hl=en" target="_blank">Designed by: <span id="bio-name">Lizette Ayala</span></a> <br>
             Logo by: <a href="https://rinkim.com" target="_blank"><span id="bio-name">Rin Kim Ni</span></a>
            <br><br>
             Contact: <a href="mailto:studio@nataliamantini.com">studio@nataliamantini.com
            </a></div>
        </div>
    </div>
    <div id="bottom-nav-container">
                <div id="bottom-nav-link-container">
            <div id="bottom-nav-link" class="nav-link-seven"> skin/body/haircare - bipoc independent businesses </div>
        </div>
        <div id="bottom-nav-link-container">
            <div id="bottom-nav-link" class="nav-link-eight"> media </div>
        </div>
        <div id="bottom-nav-link-container">
            <div id="bottom-nav-link" class="nav-link-nine"> yoga </div>
        </div>
        <div id="bottom-nav-link-container">
            <div id="bottom-nav-link" class="nav-link-ten"> advice </div>
        </div>
        <div id="bottom-nav-link-container">
            <div id="bottom-nav-link" class="nav-link-eleven"> herbalism & decolonized medicine  </div>
        </div>
    </div>
    </div>
    <div id="buttons-container">
        <div id="bio-text-container">
            <div id="bio-text-button"> bio </div>
        </div>
        <div id="button">
          <span class="dot" id="clickme-1"></span>
        </div>
        <div id="button">
          <span class="dot-two" id="clickme-2"></span>
        </div>
        <div id="button">
          <span class="dot-three" id="clickme-3"></span>
        </div>
        <div id="button">
          <span class="dot-four" id="clickme-4"></span>
        </div>
    </div>
  </div>

任何帮助将不胜感激！

Answer 1

您可以为整个身体添加一个点击事件，当用户点击其他地方时隐藏个人简介，而个人简介是可见的。此外，像这样更新您当前的点击事件；

migrate

$(document).ready(function() {
  $("#bio-text-button").click(function(event) {
    event.stopPropagation();
    if ($("#bio-container").is(':visible')) {
      $('#logo-img-container').show();
      $("#bio-container").hide();
    } else {
      $('#logo-img-container').hide();
      $("#bio-container").show();
    }
  });
  $('body').on('click', function(event) {
    if (!$(event.target).is('#bio-container-copy')) {
      $('#logo-img-container').show();
      $("#bio-container").hide();
    }
  });
});

#main-container {
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 110vw;
  height: 100vh;
  -webkit-transition: 1s;
  transition: 1s;
}

#content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

#top-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-flow: wrap;
  slign-content: center;
  align-items: center;
  height: 10%;
  width: 90%;
}

#top-nav-link-container {
  margin-left: 10px;
  margin-right: 10px;
}

#top-nav-link-container:hover {
  -webkit-transition: 1s;
  transition: 1s;
  transform: skewX(-20deg);
}

#top-nav-link {
  font-size: 20px;
  color: black;
  cursor: pointer;
}

#middle-container {
  display: flex;
  border: 2px solid black;
  height: 80%;
  width: 90%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-transition: 1s;
  transition: 1s;
  align-items: center;
  overflow: auto;
}

#logo-img-container {
  height: 100%;
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}

#logo-img {
  height: 100%;
  width: 100%;
  background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

#nav-copy-container {
  display: none;
  height: 100%;
  width: 40%;
  border-left: 2px solid black;
  overflow: auto;
  cursor: pointer;
  justify-content: center;
  text-align: center !important;
  align-self: center;
  align-content: center;
  align-items: center;
}

#bio-container {
  display: none;
  height: 100%;
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}

#bio-container-copy {
  font-size: 20px;
  color: black;
  margin: 20px;
}

#bio-name {
  -webkit-transition: 1s;
  transition: 1s;
  transform: skewX(-20deg) !important;
}

#bottom-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-flow: wrap;
  slign-content: center;
  align-items: center;
  height: 10%;
  width: 90%;
}

#bottom-nav-link-container {
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}