问题：

隐藏和显示内容函数javascript

羊舌赞

2023-03-14

我对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个答案

唐照

2023-03-14

首先不要在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>

类似资料：

隐藏仅显示CSS的显示内容列表，不使用JavaScript

问题内容：我一直在寻找一个很好的技巧，使隐藏/显示内容或仅具有CSS而没有javascript的列表。我已成功执行此操作：并且它正在工作，但没有达到应有的效果。这是问题所在：显示内容时，您可以通过单击“页面上的任何位置”将其隐藏。如何禁用它？如何通过单击“隐藏”隐藏内容“仅”？先感谢您！问题答案：我不会使用复选框，而是使用您已经拥有的代码 CSS HTML 这样，仅在单击hide元素时隐藏
控制文字内容的显示与隐藏示例

本文向大家介绍控制文字内容的显示与隐藏示例，包括了控制文字内容的显示与隐藏示例的使用技巧和注意事项，需要的朋友参考一下
隐藏元素，但显示CSS生成的内容

问题内容：是否可以隐藏元素的内容，但保持其内容可见？说我有以下代码： HTML： CSS：我试过了：使用和设置为，但两者均仍处于隐藏状态使用;，但随后似乎增加了额外的空间（？）使用颜色：透明；但是，当然，跨度的内容仍会占用空间使用，但是这被搜索引擎和似乎不适用于span元素（？）关于如何执行此操作还有其他想法吗？问题答案：您可以使用，但是使用此解决方案，隐藏的内容仍然会占用
jQuery 隐藏/显示

主要内容：实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！因为时间是宝贵的，我们提供快捷方便的学习方法。在小牛知识库,你可以学习需要的知识。实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和
可访问性和JavaScript：加载动态内容还是显示和隐藏？

我对前端代码中的可访问性标准比较陌生。我的问题是：为了实现可访问性，首先加载所有HTML内容并通过“hidden”属性显示/隐藏它是否更好？或者我可以动态加载内容并用适当的属性填充它吗？如果是，您建议我向内容添加哪些属性以通知用户内容已更新和/或更改？例如: 我有一个带有一些按钮/选项卡的navbar，这些按钮/选项卡可以加载适当的内容。我可以加载所有内容，然后显示/隐藏is，类似于下面
显示和隐藏小部件

问题内容：您如何在Tkinter中显示和隐藏小部件？我想有一个输入框，但不要一直显示它。有人可以向我展示在tkinter中显示和隐藏条目小部件和其他小部件的功能吗？我希望能够在没有多个帧的情况下执行此操作。问题答案：这已经在stackoverflow上得到了回答。简短的答案是，您可以使用grid_remove，如果先前是通过网格添加的，则将导致该小部件被删除。记住小部件的位置，因此只需简单地
延迟隐藏和显示ActionBar？

我想隐藏的动作条，当一个activity启动，当用户触摸屏幕显示几秒钟，然后再次隐藏。下面是我想要的，但我想知道是否有更好的方法（忽略一些样式问题：魔术数字、逻辑重复等）。我用的是ActionBarSherlock。谢谢
字段显示隐藏

排除不显示字段 Model.findAll({ attributes: { exclude: ['baz'] } });

隐藏和显示内容函数javascript

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档