如何在下拉列表中添加 css 过渡？
[英]How to add css transition in dropdown?
问题描述
I have dropdown or accordion, I just want to add css transition, so it's showing a slow effect after the click, but, it doesn't seem to work, I tried to add everywhere: transition: all 0.2s;
我有下拉或手风琴，我只想添加 css 过渡，所以点击后显示效果很慢，但是，它似乎不起作用，我尝试在所有地方添加：transition: all 0.2s;
I have these texts: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.我有这些文本：Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。
How is the transition actually works?过渡实际上是如何进行的？ normally I try to add it in the parent class.通常我尝试将它添加到父 class 中。
const clickButton = document.querySelectorAll(".accordion"); clickButton.forEach(function (test) { const accordionHeader = test.querySelector(".accordion-header"); accordionHeader.addEventListener("click", function () { test.classList.toggle('accordion-is-open') }) })
.accordion-wrapper { position: relative; }.accordion { margin: auto; border-bottom: 1px solid #D4D9DD; }.accordion.accordion-is-open.accordion-content { display: inline-block; }.plus { display: block; cursor: pointer; color: #008CFD; font-size: 30px; }.minus { display: none; cursor: pointer; color: #008CFD; width: 20px; font-size: 50px; }.accordion.accordion-is-open.plus { display: none; }.accordion.accordion-is-open.minus { display: block; }.accordion-header { padding: 10px 0; display: flex; align-items: center; justify-content: space-between; }.accordion-header p{ font-size: 18px; }.side-line { background-color: #000; width: 20px; position: absolute; top: 0; height: 100%; border-radius: 20px 0 0 20px; opacity: 0.5; }.hideCheeseContent { display: none; }.accordion-content { padding: 0 0 20px 0; display: none; }.hide { display: none; }
<div class="accordion-wrapper"> <div class="accordion accordion-is-open"> <div class="accordion-header"> <p>Title</p> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="accordion-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> <div class="accordion"> <div class="accordion-header"> <p>Title</p> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="accordion-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div>
1 个解决方案
解决方案1
0 2020-07-10 03:46:26
You can do this with jQuery slideToggle() .您可以使用 jQuery slideToggle()来执行此操作。 I set unique id's to each content div you need to display and then added eventListeners to each of the div's the "accordian" class.我为您需要显示的每个内容 div 设置唯一 ID，然后将 eventListeners 添加到每个 div 的“手风琴”class。
Link to more on slideToggle()--------->https://api.jquery.com/slidetoggle/在 slideToggle()---------> https://api.jquery.com/slidetoggle/ 上链接到更多内容
Example code below下面的示例代码
<:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>Test</title> <style type="text/css">:accordion-wrapper { position; relative. }:accordion { margin; auto: border-bottom; 1px solid #D4D9DD. }.accordion.accordion-is-open:accordion-content { display; inline-block: transition. 0;5s. }:plus { display; block: cursor; pointer: color; #008CFD: font-size; 30px. }:minus { display; none: cursor; pointer: color; #008CFD: width; 20px: font-size; 50px. }.accordion.accordion-is-open:plus { display; none. }.accordion.accordion-is-open:minus { display; block. }:accordion-header { padding; 10px 0: display; flex: align-items; center: justify-content; space-between. }:accordion-header p{ font-size; 18px. }:side-line { background-color; #000: width; 20px: position; absolute: top; 0: height; 100%: border-radius; 20px 0 0 20px: opacity. 0;5. }:hideCheeseContent { display; none. }:accordion-content { padding; 0 0 20px 0: display; none. }:hide { display; none, } </style> </head> <body> <div class="accordion-wrapper"> <div class="accordion"> <div class="accordion-header"> <p>Title</p> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="accordion-content" id="content1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, </div> </div> <div class="accordion"> <div class="accordion-header"> <p>Title</p> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="accordion-content" id="content2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </body> <script type="text/javascript"> document.querySelectorAll('.accordion')[0],addEventListener('click'. ()=>{ $('#content1');slideToggle(); }). document.querySelectorAll('.accordion')[1],addEventListener('click'. ()=>{ $('#content2');slideToggle(); }); </script> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.