在沒有jQuery的情況下復制jQuery slideToggle
[英]Replicating jQuery slideToggle without jQuery
問題描述
由於Anki不支持jQuery，我如何在這個特定文檔上轉換jQuery，以便在vanilla JS中生成相同的效果，或者純粹在CSS3中生成（特別是+按鈕，並且在單擊列表項時）？
$(document).ready(function () { $("#show-pronunciation").on("click", function () { $(".pronunciation").slideToggle(); }); $("li").on("click", function () { $(this).find("dl").slideToggle(); }); });
body { font-family: Avenir, Futura, sans-serif; background-color: #f7f7f7; } .definitions dl { border-left: 2px solid #ff1919; padding-left: 5px; } dt { font-weight: bold; } dd { margin-left: 1em; } .main { margin: 20px 20px 0 20px; border: transparent; border-radius: 5px; /*padding: 15px 10px 5px 10px;*/ border-collapse: collapse; background-color: #FF4C4C; padding-bottom: 5px; } .header { border-radius: 5px; padding: 5px; background-color: white; } .content { margin: 5px 5px 0px 5px; border: transparent; border-top: none; border-radius: 5px; padding: 5px; background-color: #FCE8E8; } .info { clear: both; padding: 5px; display: block; } .grammatical-info { display: inline-block; border: transparent; border-radius: 5px; float: left; padding: 3px; background: deepskyblue; color: white; } .level { display: inline-block; border: transparent; border-radius: 5px; float: right; padding: 3px; background: crimson; color: white; } .foreign-word { display: inline-block; border: transparent; position: relative; font-size: 20pt; } .pronunciation { display: none; overflow: auto; border: transparent; border-radius: 10px; background-color: white; font-size: 8pt; position: absolute; left: -2px; bottom: 40px; width: 100%; text-align: center; } .btn { font-size: 20pt; background-color: transparent; border: none; border-radius: 28px; cursor: pointer; text-decoration: none; text-shadow: none; display: inline-block; color: #999; } .btn:hover { color: #aaa; } .btn:active { color: #ccc; } #play-sound { float: right; }
<!DOCTYPE html> <html> <head> <title>2ndlang card type</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="main"> <div class="header"> <button class="btn" id="show-pronunciation">+</button> <div class="foreign-word">制造<div class="pronunciation"> zhì zào </div> </div> <button class="btn" id="play-sound"><img src="http://uxrepo.com/static/icon-sets/elusive/svg/volume.svg" height="20px"/></button> </div> <div class="info"> <span class="grammatical-info">動 verb</span> <span class="level">三</span> </div> <br/> <div class="content"> <div class="definitions"> <ol> <li> manufacture <dl> <dt>中國制造</dt> <dd>Made in China</dd> </dl> </li> <li> create <dl> <dt>制造假象</dt> <dd>put up a false front</dd> <dt>制造緊張局勢</dt> <dd>create tension</dd> <dt>制造麻煩</dt> <dd>make trouble</dd> </dl> </li> </ol> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
5 已采納 2015-10-03 04:31:31
你可以使用css過渡。 例如：
.pronunciation, li dl {
overflow: hidden;
transition: height .3s linear;
}
.hidden {
height: 0!important;
}
看看下面的代碼（與你的邏輯相同，但轉換為vanilla Javascript和CSS3）：
document.addEventListener('DOMContentLoaded', function() { var show = document.getElementById('show-pronunciation'); var pron = document.querySelector('.pronunciation'); pron.style.height = pron.clientHeight + 'px'; pron.classList.add('hidden'); show.addEventListener('click', function(e) { pron.classList.toggle('hidden'); }); [].forEach.call(document.querySelectorAll('li'), function(el, i) { var dl = el.querySelector('dl'); dl.style.height = dl.clientHeight + 'px'; el.addEventListener('click', function() { dl.classList.toggle('hidden'); }); }); });
body { font-family: Avenir, Futura, sans-serif; background-color: #f7f7f7; } .definitions dl { border-left: 2px solid #ff1919; padding-left: 5px; } dt { font-weight: bold; } dd { margin-left: 1em; } .main { margin: 20px 20px 0 20px; border: transparent; border-radius: 5px; /*padding: 15px 10px 5px 10px;*/ border-collapse: collapse; background-color: #FF4C4C; padding-bottom: 5px; } .header { border-radius: 5px; padding: 5px; background-color: white; } .content { margin: 5px 5px 0px 5px; border: transparent; border-top: none; border-radius: 5px; padding: 5px; background-color: #FCE8E8; } .info { clear: both; padding: 5px; display: block; } .grammatical-info { display: inline-block; border: transparent; border-radius: 5px; float: left; padding: 3px; background: deepskyblue; color: white; } .level { display: inline-block; border: transparent; border-radius: 5px; float: right; padding: 3px; background: crimson; color: white; } .foreign-word { display: inline-block; border: transparent; position: relative; font-size: 20pt; } .pronunciation { overflow: auto; border: transparent; border-radius: 10px; background-color: white; font-size: 8pt; position: absolute; left: -2px; bottom: 40px; width: 100%; text-align: center; } .btn { font-size: 20pt; background-color: transparent; border: none; border-radius: 28px; cursor: pointer; text-decoration: none; text-shadow: none; display: inline-block; color: #999; } .btn:hover { color: #aaa; } .btn:active { color: #ccc; } #play-sound { float: right; } .pronunciation, li dl { overflow: hidden; transition: height .3s linear; } .hidden { height: 0!important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="main"> <div class="header"> <button class="btn" id="show-pronunciation">+</button> <div class="foreign-word">制造<div class="pronunciation"> zhì zào </div> </div> <button class="btn" id="play-sound"> <img src="http://uxrepo.com/static/icon-sets/elusive/svg/volume.svg" height="20px" /> </button> </div> <div class="info"> <span class="grammatical-info">動 verb</span> <span class="level">三</span> </div> <br/> <div class="content"> <div class="definitions"> <ol> <li> manufacture <dl> <dt>中國制造</dt> <dd>Made in China</dd> </dl> </li> <li> create <dl> <dt>制造假象</dt> <dd>put up a false front</dd> <dt>制造緊張局勢</dt> <dd>create tension</dd> <dt>制造麻煩</dt> <dd>make trouble</dd> </dl> </li> </ol> </div> </div> </div>
在沒有 jQuery 的情況下單擊時切換同級
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.