stackoom
  简体   繁体   中英

Replicating jQuery slideToggle without jQuery

 原文  2015-10-03 03:37:32  9   1    javascript/ jquery/ html/ css/ anki

Question

Since Anki doesn't support jQuery, how would I go about converting the jQuery on this particular document so that the same effects are produced in vanilla JS, or purely in CSS3 (specifically of the + button, and when clicking on list items)? 

 $(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 answers

solution1
 5 ACCPTED  2015-10-03 04:31:31

You can use css transitions for that. Eg: 

.pronunciation, li dl {
  overflow: hidden;
  transition: height .3s linear;
}
.hidden {
  height: 0!important;
}

Take a look at the code below (same logic as yours, but converted to vanilla Javascript and 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question slideToggle sibling on click without jQuery jQuery slideToggle() JQuery slidetoggle jQuery: slideToggle and instant callback without micro pause Use JQuery SlideToggle Without Moving Content Below Using jQuery slideToggle() without display:none? Replicating Cargocollective jquery/lightbox react using jquery to slideToggle slidetoggle table row with jQuery Collapse slideToggle on Click jQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM