Question

我希望ID为logo2的图标在单击“真棒字体”栏时隐藏，并在再次单击该按钮时显示，即导航栏将其隐藏，但在使用移动设备的宽度时会显示出来。请帮忙。这是我的html

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShaurEducationalComplex</title>
    <script src="app.js"></script>
    <link rel="stylesheet" tyle="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@900&display=swap" rel="stylesheet">
</head>
<body>
  <!-- This is the first blue block -->
         <!-- This is for testing may it works -->
     <div class="container7">
      <div class="box7">
          <div class="container7inside">

              <div class="box7inside">
              <a href="https://www.facebook.com/saylaniwelfare/"><i id="iconabove" class="fab fa-facebook-f"></i></a>      
              </div>
              <div class="box7inside">
              <a href="https://twitter.com/OfficialSwit"><i id="iconabove" class="fab fa-twitter"></i></a>        
              </div>
              <div class="box7inside">
                  <a href="https://www.instagram.com/saylaniwelfare/"><i id="iconabove" class="fab fa-instagram"></i></a>

              </div>
              <div class="box7inside">
                  <a href="https://www.youtube.com/c/SaylaniWelfareTrustOfficialPage"><i id="iconabove" class="fab fa-youtube"></i></a>

              </div>
              <div class="box7inside">
                  <a href="https://api.whatsapp.com/send?phone=923331201585&text=&source=&data=&app_absent="><i id="iconabove" class="fab fa-whatsapp"></i></a>

              </div>    
          </div>
          <!-- This is for testing may it works  -->
      </div>
      <div class="box7para">        
        The Institute of Excellence in Education
      </div>
      <div class="box7para">
          <span id="btns">
              <!-- <button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/home'" type="button">
                &nbsp&nbspUK Donor&nbsp&nbsp</button>
               <button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/Online-Sadqah'" type="button">
                    &nbsp&nbspDonate Now&nbsp&nbsp</button> -->
                    <button id="btn3" onclick="location.href='https://www.saylaniwelfare.com/result'" type="button">
                     &nbsp&nbspBOARD Results&nbsp&nbsp</button>
          </span>
      </div>
  </div>
  <!-- This is the first blue block -->
 <!-- This is the coding nepal navigation bar -->
 <nav>
   <!-- <div class="logo"><img src="Images/dha_es_logo-1.png" alt=""></div> -->
   <label for="btn" class="icon">
     <span id="_bar_Id_" class="fa fa-bars"></span>
   </label>
   <input type="checkbox" id="btn">
   <ul>

     <li><a href="#">Home</a></li>
     <li>
       <label for="btn-1" class="show">Features +</label>
       <a href="#">Features</a>
       <input type="checkbox" id="btn-1">

       <ul>
         <li><a href="#">Pages</a></li>
         <li><a href="#">Elements</a></li>
         <li><a href="#">Icons</a></li>
        </ul>
     </li>
     <li>
      <label for="btn-2" class="show">Services +</label>
      <a href="#">Services</a>
      <input type="checkbox" id="btn-2">

      <ul>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Elements</a></li>
        <li>
          <label for="btn-3" class="show">More +</label>
          <a href="#">More
            <span class="fas fa-caret-down"></span>
          </a>
          <input type="checkbox" id="btn-3">
          <ul>
            <li><a href="#">Submenu-1</a></li>
            <li><a href="#">Submenu-2</a></li>
            <li><a href="#">Submenu-3</a></li>
          </ul>

        </li>
        <li><a href="#">Pages</a></li>
      </ul>
     </li>

     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Portfolio</a></li>

   </ul>
 </nav>
 <!-- This is the coding nepal navigation bar -->

 <!-- <div><img class="logo2" src="Images/dha_es_logo-1.png" alt=""></div> -->
 <div id="logo2"><img src="Images/dha_es_logo-1.png" alt=""></div>



<!-- This is the slideshow -->
<div id="slideshow">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img id="image" src="Images/jmjcoKA.jpg" class="d-block w-100" alt="This is image 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img id="image" src="Images/2ndpic.jpg" class="d-block w-100" alt="This is image 2">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img id="image" src="Images/weJHcPH.jpg" class="d-block w-100" alt="This is image 3">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<!-- This is the slideshow -->


<!-- this is the marquee tag -->
<div id="containermarq">
<marquee id="marq" width="80%" direction="right" height="60px">
  <div id="txtmarq">  This is a sample scrolling text that has scrolls texts to right.
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora ex, consectetur fuga quibusdam quas quae odio! Perspiciatis eaque ex, animi nisi minus harum vero possimus aspernatur adipisci cum ullam exercitationem?
  </div>
</div>
</marquee>
<!-- this is the marquee tag -->



<!-- A warm welcome -->
<div class="welcome">
   <div id="welcomehead"><div></div>
     <br>&nbsp&nbsp&nbsp&nbsp&nbspAbout Us :
     <div id="welcomepara">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere repellat fugit blanditiis! Voluptates aliquam distinctio laboriosam quibusdam debitis pariatur, assumenda corrupti dolorum aperiam tempore, vel ad ex exercitationem doloribus explicabo.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt facilis vero modi, odit ex delectus asperiores quasi corrupti minus, tempora quos culpa quis ullam non labore dolore. Soluta, debitis!
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim harum magni, quasi ducimus facilis quidem hic dolores. Facilis quis qui dolores. Deleniti quae, sint eligendi eaque molestiae a dolor perferendis?
       <br><br><br><br>
     </div>
   </div>
</div>
<!-- A warm welcome -->

<div id="welcomehead">
  &nbsp&nbsp&nbsp&nbsp&nbspEvents :
</div>

<!-- This is the community support -->
<div class="container3">
  <div class="box3">  
    <img id="img2" src="Images/2ndpic.jpg">
    <div class="overlay1">
      <div class="text">Art day</div>
    </div>
    <div class="txtover">Art day</div>
 </div>

 <div class="box3">
   <img id="img2" src="Images/small2.jfif">
   <div class="overlay1">
    <div class="text">Eid Millan day</div>
  </div>
  <div class="txtover">Eid Millan day</div>
</div>

 <div class="box3">
  <img id="img2" src="Images/small3.jfif">
  <div class="overlay1">
    <div class="text">Food Gala</div>
  </div>
  <div class="txtover">Food Gala</div>
</div>

 <div class="box3">
  <img id="img2" src="Images/image1.jfif">
  <div class="overlay1">
    <div class="text">Fun Factory Trip</div>
  </div>
  <div class="txtover">Fun Factory Trip</div>
</div>
</div>
<!-- This is the community support -->

<div id="mapbox">
  <div id="divsocial">
    <div style="border: 1px solid red;margin-left: 20px;color: black;visibility: visible;">SEC on Social Media</div>
    <br>
          <div id="icondown">
          <div><a href="https://www.facebook.com/saylaniwelfare/"><i id="icondf" class="fab fa-facebook-f"></i></a></div>
          <div><a href="https://twitter.com/OfficialSwit"><i id="icondt" class="fab fa-twitter"></i></a></div>        
          <div><a href="https://www.instagram.com/saylaniwelfare/"><i id="icondi" class="fab fa-instagram"></i></a></div> 
          <div><a href="https://www.youtube.com/c/SaylaniWelfareTrustOfficialPage"><i id="icondy" class="fab fa-youtube"></i></a></div>
          <div><a href="https://api.whatsapp.com/send?phone=923331201585&text=&source=&data=&app_absent="><i id="icondw" class="fab fa-whatsapp"></i></a></div>
          </div>
  </div>

<iframe id="map" src="https://www.google.com/maps/d/embed?mid=1AIsf-4etCQOgWKawr8kp-6CFGp1jsZ-9" width="640" height="480"></iframe>
</div>

<!-- This is for the picture flex box hover -->
<div class="container2">
  <div class="box2">  
<img id="img2" src="Images/small1.jfif">
<div class="overlay">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam 
</div>
 </div>

 <div class="box2">
<img id="img2" src="Images/small2.jfif">
<div class="overlay">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam 
</div>
</div>

 <div class="box2">
<img id="img2" src="Images/small3.jfif">
<div class="overlay">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam d
</div>
</div>

 <div class="box2">
  <img id="img2" src="Images/2ndpic.jpg">
<div class="overlay">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, 
  veniam consequatur impedit odit quae vel tempora perferendis expedita ipsam 
</div>
</div>
</div>
<!-- This is for the picture flex box hover --> 

<div style="border: 1px solid white;background-color: transparent;width: 100px;height: 100px;"></div>

 <!-- This is the bootstrap js -->
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 <!-- This is the bootstrap js -->
</body>
</html>

#btns{
        line-height: 0px;
    }
    #btn3{
        margin-bottom: 7px;
        background-color:whitesmoke;
        color: darkolivegreen;
        height: 30px;
    }
    .btns{
        background-color: DodgerBlue; /* Blue background */
        border: none; /* Remove borders */
        color: white; /* White text */

      }

      /* Darker background on mouse-over */
      .btns:hover {
        background-color: RoyalBlue;
      }
    .container7{
        margin-left:0px;
        margin-top: 0px;
        width: 100%;
        min-height: 40px;
        background-color:aliceblue;
        border-bottom: 1px solid aliceblue;
        /*add flexbox style*/
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-flow: wrap;
        animation-name: fade;
        animation-duration: 3s;             
        animation-fill-mode: forwards; 
    }
    .box7{
        width: fit-content;
        height: 20px;
        box-sizing: border-box;
        align-items:center;
        text-align: center;
        justify-content: center;
    }
    #iconabove{
        margin-top: 10px;
        text-align: center;
        font-size: 20px;
        color:purple;
        transition: 0.2s linear;
    }
    #iconabove:hover{
       color:white;
       background-color:transparent;
    }
    .container7inside{
        margin-left:0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        width: 100%;
        min-height: fit-content;
        background:transparent;
        /*add flexbox style*/
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-flow: wrap;

    }
    .box7inside{
        width: 35px;
        height: fit-content;
        box-sizing: border-box;
        display: inline-block;
        background: #f1f1f1;
        margin: 3px;
        box-shadow: 0 5px 15px -5px #00000070;
        color:aliceblue;
        overflow: hidden;
        position: relative;
        border-radius: 30%;
    }
    .box7inside:hover{
        transform: scale(1.3);
        color:aliceblue;

       background-color:#1b1b1b;
    }
    .box7inside::before{
        width: 120%;
        height: 120%;
        background:transparent;
        transform: rotate(45deg);
        left: -110%;
        transition: 0.2s linear;
        top:90%
    }
    .box7inside:hover::before{
        animation: aaa 0.7s 1;
        top: -10%;
        left: -10%;
    }
    @keyframes aaa{
        0%{
            left: -110%;
            top:90%
        }50%{
            left: 10%;
            top:-30%
        }100%{
            top: -10%;
            left: -10%;
        }
    }
    .box7para{
        font-size: 18px;
        line-height: 40px;
        margin-left: 80px;
        margin-right: 0px;
        color: purple;

    }

    /* This is for navigation bar */
    *{
        margin: 0;
        padding: 0;
        color: white;
        box-sizing: border-box;
        font-family: sans-serif;
    }
    body{
         background: #1b1b1b;
        /* background: radial-gradient(#1b1b1b, black); */
    }
    nav{
        background:purple;
        position: relative;
          top: 0;
          width: 100%;
          height: fit-content;
          left: 0;
        /* background: radial-gradient(#1b1b1b, rgb(15, 15, 46),rgb(49, 48, 65),black); */

    }
    #logo2{
        float: left;
        width: 200px;
        height: 200px;
        background-color: aliceblue;
        position: absolute;
        top: 40px;
        left: 10px;

    }
    nav::after{
        content: '';
        clear: both;
        display: table;
    }
    nav ul{
        float: right;
        list-style: none;
        margin-left: 0px;
        margin-right: 50px;
        line-height: 10px;
        position: relative;
    }
    nav ul li{
        float: left;
        display: inline-block;
        background:transparent;
        margin: 0 5px;
    }
    nav ul li a{    
        color:purple;
        background-color:aliceblue;
        text-decoration: none;
        line-height: 70px;
        font-size: 18px;
        padding: 8px 15px;
    }
    nav ul li a:hover{
        position: relative;
        z-index: 10000;
        text-decoration: none;
        color: red;
        border-radius: 5px;
        box-shadow: 0 0 5px #33ffff,
                    0 0 5px #66ffff;
    }
    nav ul ul li a:hover{
        position: relative;
        z-index: 10000;
        color: cyan;
        box-shadow: none;
    }
    nav ul ul li{
        background-color: cornsilk;
    }
    nav ul ul li a{
        color: black;
        line-height: 50px;
    }
    nav ul ul li a:hover{
        color:orange;
    }
    nav ul li:hover > ul{

        top: 70px;
        opacity: 1;
        visibility: visible;
    }
    nav ul ul{
        position: absolute;
        top: 90px;
        border-top: 3px solid cyan;
        opacity: 0;
        line-height: 50px;
        visibility: hidden;
        transition: top .3s;
    }
    nav ul ul ul{
        border-top: none;
        line-height: 50px;
    }
    nav ul ul li{    
        position: relative;
        margin: 0px;
        width: 150px;
        line-height: 50px;
        float: none;
        display: list-item;
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    nav ul ul li a{
        line-height: 50px;

    }

    #slideshow{
        position: relative;
        z-index: -1;
    }
    #image{
        width: 100%;
        height: 500px;
    }
    nav ul ul ul li{
        position: relative;
        top: -70px;
        color: #1b1b1b;
        left:150px;
    }
    /* This is for navigation bar coding nepal */
    .fa-caret-down{
        margin-left: 40px;
        font-size: 15px;
        color: black
    }
    /* second part responsive nav bar */
    .show,.icon, input{
        display: none;
    }
    nav ul li ul li a{
        color: black;
    }
    /* responsive part for navigation bar */
    @media all and (max-width:690px)
    {
        #logo2{
            top: 80px;
            }

    }
    @media all and (max-width: 968px)
    {

        nav ul{
            margin-right: 0px;
            float:left;
            color: azure;
        }
        nav .logo{
            padding-left: 0px;
            visibility: visible;

            position: static;
            float: left;
            width: auto;
        }
        nav ul li,nav ul ul li{
            display:block;
            width: 100%;
        }
        nav ul ul{
            top:70px;
            position: static;
            border-top: none;
            float:none;
            display: none;
            opacity:1;
            visibility: visible;
        }
        nav ul ul ul li{
            position: static;
        }
        nav ul ul li{
            border-bottom: 0px;
        }
        nav ul ul a{
        padding-left: 40px;
        }
        nav ul ul ul a{
            padding-left: 80px;
        }
        .show{
            display: block;
            color:purple;
            font-size: 18px;
            padding: 0 20px;
            line-height: 40px;
            width: fit-content;
            height: 40px;
            background-color: white;
            cursor: pointer;
        }
        /* .show1{
            color: #1b1b1b;
        } */
        .show:hover{
            color:cyan;
        }
        .icon{
            display: block;
            color: white;
            position: absolute;
            right: 40px;
            line-height: 70px;
            font-size: 25px;
            cursor: pointer;
        }
        nav ul li a:hover{
           box-shadow: none; 
        }
        .show + a,ul{
        display: none;
        }
        [id^=btn]:checked + ul{
            display: block;
        }
    }
    * {box-sizing: border-box;}
    /* responsive part for navigation bar */
    /* second part responsive nav bar*/
    /* this is the flex box div */
    .container2{
        width: 100%;
        min-height:300px ;
        background-color:purple;
        /*add flexbox style*/
        display: flex;
        flex-direction: row;
        border: 1px solid white;
        justify-content: space-around;
        flex-flow: wrap;
    }
    .box2{
        width: 300px;
        border: 1px solid black;
        height: 300px;
        background:transparent;
        margin: 2px;
        position: relative;
        box-sizing: border-box;
        font-size: 50px;
    }
    #img2
    {
        display: block;
        width: 100%;
        height: 100%;
    }


    /* this is the flex box div */
    /* This is image hover effects */
    .overlay {
        position: relative;
        bottom: 0; 
        background: rgb(0, 0, 0);
        background:radial-gradient(rgba(1, 2, 3, 0.1),rgba(3, 4, 5, 0.9));  /* Black see-through */
        /* background: #466368;
        background: radial-gradient(#648880, #293f50);*/
        color: #f1f1f1;  
        width: 100%;
        transition: .5s ease-in-out;
        opacity:0;
        width: 300px;
        height: 300px;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
        top: -300px;
        float: unset;
        bottom: 0px;
      }
      .box2:hover .overlay {
        opacity: 5;
      }

    /* This is image hover effects */

    .welcome{
        border:1px solid #1b1b1b;
    }
    #welcomepara{
        margin-left: 0px;
    border: 1px solid red;
        background-color:purple;
        font-size: 40px;
        font-weight: lighter;
        font-family: 'Times New Roman', Times, serif;
        color: orange;
    }
    /* add responive media queries */
    @media screen and (max-width:800px){
        .box7para::before{
          text-align: center;
        }
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }
    }
    @media screen and (max-width:900px){

        .container7inside::before{
            content: "\A";
            text-align: center;
             white-space: pre; 
        } 
        #block2{
            text-align: center;
        }
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }
    }
    @media screen and (max-width:1000px){    
        .container7inside::before{
            content: "\A";
            text-align: center;
             white-space: pre; 
        } 
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }

    }
    @media screen and (max-width:600px){
        .container7inside{
            margin-left: 0px;
        }
        .box7para::before{
            text-align: center;
        }
        .box7para{
            margin-left: 0px;
        }
        .container7inside{
            margin-left: 0px;
        }
    }

//**and the javascript is**
   document.getElementById("_bar_Id_").onclick = function() {
    var x = document.getElementById("logo2");
    if (x.style.visibility === "hidden") {
    x.style.visibility = "visible";
    } else {
      x.style.visibility = "hidden";
      }
    }

到网站的链接是检查 https://muhammad-bilal-7896.github.io/School-website/

Answer 1

首先，您的函数具有未在任何地方定义的“ div”。

第二，您可以使用以下代码来切换徽标的可见性：

document.getElementById("_bar_Id_").onclick = function() {
var x = document.getElementById("logo2");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
  x.style.visibility = "hidden";
  }
}

然后，只需记住将“ _bar_Id_”添加到“真棒字体”栏中。

<div id="_bar_Id_" class="container7">

如何在“真棒字体”栏上单击隐藏图标，并在再次单击该栏时再次显示它

1 个答案: