1. 首页
  2. 问题列表
  3. 隐藏和显示内容函数javascript
提问者：小点点

隐藏和显示内容函数javascript


我对javascript很陌生，我试图做一个函数，当我点击img按钮时，隐藏和显示我的Q&；a上的内容，但我只能在每个按钮上做三次相同的函数。有没有一种方法使它在单一的功能中？当我尝试通过一个函数来实现时，无论我点击了哪个按钮，这个函数只对顶部的第一个QA元素起作用。

null

function hideShowA() {
  var x = document.getElementById("hBlock1")
  var a = document.getElementById("QA1")
  if (x.style.display === "none") {
    x.style.display = "block";
    a.style.height = "100%";
  } else {
    x.style.display = "none";
    a.style.height = "75px";
  }


}

function hideShowB() {
  var y = document.getElementById("hBlock2")
  var b = document.getElementById("QA2")
  if (y.style.display === "none") {
    y.style.display = "block";
    b.style.height = "100%";
  } else {
    y.style.display = "none";
    b.style.height = "75px";
  }


}

function hideShowC() {
  var z = document.getElementById("hBlock3")
  var c = document.getElementById("QA3")
  if (z.style.display === "none") {
    z.style.display = "block";
    c.style.height = "100%";
  } else {
    z.style.display = "none";
    c.style.height = "75px";
  }


}
div.QA {
  border: 1px solid black;
  box-shadow: 0 0 10px rgb(238, 191, 105);
  padding-left: 20px;
  padding-right: 10px;
  margin-bottom: 25px;
  border-radius: 8px;
  width: 550px;
  height: 75px;
  background-color: #021414;
  ;
  color: rgb(238, 191, 105);
}

div.QA#QA1 img {
  position: relative;
  left: 225px;
}

div.QA#QA2 img {
  position: relative;
  left: 280px;
}

div.QA#QA3 img {
  position: relative;
  left: 275px;
}

div.Qabloc {
  display: flex;
  flex-direction: column;
  align-content: center;
  margin-left: 300px;
  margin-right: 300px;
  margin-top: 80px;
}

div.blocTitle {
  position: relative;
  right: 32px;
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Dancing Script', cursive;
  color: rgb(238, 191, 105);
}

div.hBlock {
  display: none;
  border-top: 0.1px solid white;
  padding-top: 10px;
  margin-right: 10px;
  color: white;
}

body {}

html {
  overflow: hidden;
}


/* ALL ANIMATION */


/* img animation */

div.QA#QA1 img:hover {
  -webkit-animation: spin 3s;
  -moz-animation: spin 3s;
  animation: spin 3s;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

div.QA#QA2 img:hover {
  -webkit-animation: spin 3s;
  -moz-animation: spin 3s;
  animation: spin 3s;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

div.QA#QA3 img:hover {
  -webkit-animation: spin 3s;
  -moz-animation: spin 3s;
  animation: spin 3s;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* img animation */
<html lang="en" style="background-color:#021414;">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/css.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

  <title>Q&A</title>
</head>

<body>
  <div class="Qabloc">

    <div class="blocTitle">
      <h1>General Questions</h1>
    </div>

    <div class="QA" id="QA1">
      <p>
        <h4> Do you accept All major Credits Cards ? <img onclick="hideShowA()" width="24px" height="24px" src="img/plus-sign.png"> </h4>
        <div class="hBlock" id="hBlock1">ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div>
      </p>
    </div>

    <div class="QA" id="QA2">
      <p>
        <h4> Do you Support Local Farmers ?<img onclick="hideShowB()" src="img/plus-sign.png" width="24px" height="24px"> </h4>
        <div class="hBlock" id="hBlock2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div>
      </p>
    </div>

    <div class="QA" id="QA3">
      <p>
        <h4> Do You Use Organic Ingredients ? <img onclick="hideShowC()" src="img/plus-sign.png" width="24px" height="24px"> </h4>
        <div class="hBlock" id="hBlock3">ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div>
      </p>
    </div>

  </div>
  <script src="js.js">
  </script>

</body>

</html>

null

[！[

null

function hideShowA(){
     var x = document.getElementById("hBlock1")
     var a = document.getElementById("QA1")
     if( x.style.display=== "none"){
         x.style.display = "block";
         a.style.height = "100%";
     }
     else{
         x.style.display = "none";
         a.style.height = "75px";
     }


}
function hideShowB(){
    var y = document.getElementById("hBlock2")
    var b = document.getElementById("QA2")
    if( y.style.display=== "none"){
        y.style.display = "block";
        b.style.height = "100%";
    }
    else{
        y.style.display = "none";
        b.style.height = "75px";
    }


}
function hideShowC(){
    var z = document.getElementById("hBlock3")
    var c = document.getElementById("QA3")
    if( z.style.display=== "none"){
        z.style.display = "block";
        c.style.height = "100%";
    }
    else{
        z.style.display = "none";
        c.style.height = "75px";
    }


}
div.QA{
    border: 1px solid black;
    box-shadow: 0 0 10px rgb(238, 191, 105);
    padding-left: 20px;
    padding-right: 10px;
    margin-bottom: 25px;
    border-radius: 8px;
    width: 550px ;
    height: 75px;
    background-color: #021414;;
    color:rgb(238, 191, 105);
    

}




div.QA#QA1 img{
    position: relative;
    left: 225px;

}


div.QA#QA2 img{
    position: relative;
    left: 280px;

}
div.QA#QA3 img{
    position: relative;
    left: 275px;

}

div.Qabloc{
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-left: 300px;
    margin-right: 300px;
    margin-top: 80px;
    
    
}

div.blocTitle{
    position: relative;
    right: 32px;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Dancing Script', cursive;
    color: rgb(238, 191, 105) ;
   
}


div.hBlock{
    display: none;
    border-top: 0.1px solid white;
    padding-top: 10px;
    margin-right: 10px;
    color: white;
    
}
body{
    
}



html{
    overflow: hidden;
    
}

/* ALL ANIMATION */

/* img animation */
div.QA#QA1 img:hover{
    -webkit-animation:spin 3s ;
    -moz-animation:spin 3s ;
    animation:spin 3s ;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

div.QA#QA2 img:hover{
    -webkit-animation:spin 3s ;
    -moz-animation:spin 3s ;
    animation:spin 3s ;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

div.QA#QA3 img:hover{
    -webkit-animation:spin 3s ;
    -moz-animation:spin 3s ;
    animation:spin 3s ;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* img animation */
<html lang="en" style="background-color:#021414;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/css.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

    <title>Q&A</title>
</head>
<body>
    <div class="Qabloc">   

    <div class="blocTitle"> <h1>General Questions</h1> </div>

    <div class="QA" id="QA1"> <p> <h4> Do you accept All major Credits Cards ? <img onclick="hideShowA()" width="24px" height="24px" src="img/plus-sign.png"> </h4>  <div class="hBlock" id="hBlock1">ipsum dolor sit amet, consectetur adipiscing elit.
         Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div>

    <div class="QA" id="QA2"> <p> <h4> Do you Support Local Farmers ?<img onclick="hideShowB()" src="img/plus-sign.png" width="24px" height="24px"> </h4>  <div class="hBlock" id="hBlock2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div>

    <div class="QA" id="QA3"> <p> <h4> Do You Use Organic Ingredients ? <img onclick="hideShowC()" src="img/plus-sign.png" width="24px" height="24px"> </h4>  <div class="hBlock" id="hBlock3">ipsum dolor sit amet, consectetur adipiscing elit.
         Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div>

    </div>
    <script src="js.js"> </script>
    
</body>
</html>

null

]1]1


共1个答案

匿名用户

首先不要在h1-h5标签中使用img如果您想添加图像，您可以创建div包装器，如:

<div>
  <h2>title</h2>
  <img.../>
</div>

在js中，您可以创建一个具有少量变体的任务，其中之一是单击add class and function show/hide implement with css display:none/display:block；

null

let qa = document.querySelectorAll('.qa')

qa.forEach((e,i)=>{
  e.querySelector('.button').addEventListener('click', _=>e.classList.toggle('show'))
})
*{
padding: 0;
margin: 0;
}
.button{
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
cursor: pointer;
}

.qa{
display: flex;
flex-direction: column;
}
.answer{
display: none;
}

.qa.show .answer{
display: block;
}
<div class="qa">
  <div class="button">show answer</div>
  <div class="question">FAQ 1</div>
  <div class="answer"><p>Lorem ipsum</p></div>
</div>

<div class="qa">
  <div class="button">show answer</div>
  <div class="question">FAQ 1</div>
  <div class="answer"><p>Lorem ipsum</p></div>
</div>

<div class="qa">
  <div class="button">show answer</div>
  <div class="question">FAQ 1</div>
  <div class="answer"><p>Lorem ipsum</p></div>
</div>

<div class="qa">
  <div class="button">show answer</div>
  <div class="question">FAQ 1</div>
  <div class="answer"><p>Lorem ipsum</p></div>
</div>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS