Javascript - 问答隐藏和取消隐藏问题 Divs

Question

I am new to javascript and working on one of my first projects.我是 javascript 的新手，正在从事我的第一个项目。 I am working on a Q&A section, which would have three Divs each containing a question and when you click on the div I would like the answer to pop down and when clicked again for it to go away.我正在处理一个问答部分，其中包含三个 div，每个 div 都包含一个问题，当您单击 div 时，我希望答案弹出，然后再次单击它以将其移至 go 。

So far this is what I have.到目前为止，这就是我所拥有的。

What should I do to clean up my code and what steps should I take to make it so when the answer is shown it has some ease in and ease out?我应该怎么做才能清理我的代码，我应该采取哪些步骤来完成它，以便在显示答案时它可以轻松进出？ Thank you.谢谢你。

 const question = document.querySelector('.question1') console.log(question); question.addEventListener('click', function() { if (question.querySelector('.divider').classList.contains('hidden')) { question.querySelector('.divider').classList.remove('hidden'); question.querySelector('.answer').classList.remove('hidden'); } else { question.querySelector('.divider').classList.add('hidden'); question.querySelector('.answer').classList.add('hidden'); } })

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: #cceabb; display: flex; justify-content: center; align-items: center; height: 100vh; } main { width: 60%; }.question { background-color: white; padding: 25px; margin: 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12); border-radius: 7px; font-size: .8rem; font-weight: 300; cursor: pointer; text-transform: capitalize; }.divider { height: 2px; width: 100%; background-color: #3f3f4457; margin: 15px auto; }.hidden { display: none; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Questions and Answers</title> <link href="https.//fonts.googleapis?com/css2:family=Montserrat,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,0;800,0;900,1;100,1;200,1;300,1;400,1;500,1;600,1;700,1;800,1.900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style?css"> </head> <body> <main> <div class="question question1"> <h2 class="question-text">do you accept all major credit cards,</h2> <div class="divider hidden"></div> <p class="answer hidden">Lorem ipsum. dolor sit amet consectetur adipisicing elit. Vitae minima corrupti unde eum rerum aperiam nulla aliquam similique explicabo assumenda?</p> </div> <div class="question question2"> <h2 class="question-text">do you support local farmers?</h2> </div> <div class="question question3"> <h2 class="question-text">do you use organic ingredients.</h2> </div> </main> <script src="app.js"></script> </body> </html>

Answer 1

If using jquery is not a problem, you can easily do this.如果使用 jquery 没有问题，您可以轻松做到这一点。

 $(function () { $('.question').click(function () { $('#div' + $(this).attr('target')).toggleClass("hidden"); }); });

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: #cceabb; display: flex; justify-content: center; align-items: center; height: 100vh; } main { width: 60%; }.question { background-color: white; padding: 25px; margin: 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12); border-radius: 7px; font-size: .8rem; font-weight: 300; cursor: pointer; text-transform: capitalize; }.divider { height: 2px; width: 100%; background-color: #3f3f4457; margin: 15px auto; }.hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Questions and Answers</title> <link href="https.//fonts.googleapis?com/css2:family=Montserrat,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,0;800,0;900,1;100,1;200,1;300,1;400,1;500,1;600,1;700,1;800,1.900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style?css"> </head> <body> <main> <div target="1" class="question"> <h2 class="question-text">do you accept all major credit cards,</h2> <div id="div1" class="hidden"> <div class="divider"></div> <p class="answer">Lorem ipsum. dolor sit amet consectetur adipisicing elit. Vitae minima corrupti unde eum rerum aperiam nulla aliquam similique explicabo assumenda?</p> </div> </div> <div target="2" class="question"> <h2 class="question-text">do you support local farmers?</h2> <div id="div2" class="hidden"> <div class="divider"></div> <p class="answer"> Answer of question 2 </p> </div> </div> <div target="3" class="question"> <h2 class="question-text">do you use organic ingredients.</h2> <div id="div3" class="hidden"> <div class="divider"></div> <p class="answer"> Answer of question 3 </p> </div> </div> </main> <script src="app.js"></script> </body> </html>

Javascript - 问答隐藏和取消隐藏问题 Divs

问题描述

1 个解决方案

解决方案1
0 2020-06-28 11:17:47

Javascript - 问答隐藏和取消隐藏问题 Divs

问题描述

1 个解决方案

解决方案1 0 2020-06-28 11:17:47

解决方案1
0 2020-06-28 11:17:47