JS30官网
今天来讲解第二十六天吧!
<h2>Cool</h2>
<nav class="top">
<div class="dropdownBackground">
<span class="arrow"></span>
</div>
<ul class="cool">
<li>
<a href="#">About Me</a>
<div class="dropdown dropdown1">
<div class="bio">
<img src="https://logo.clearbit.com/wesbos.com">
<p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!</p>
</div>
</div>
</li>
<li>
<a href="#">Courses</a>
<ul class="dropdown courses">
<li>
<span class="code">RFB</span>
<a href="https://ReactForBeginners.com">React For Beginners</a>
</li>
<li>
<span class="code">ES6</span>
<a href="https://ES6.io">ES6 For Everyone</a>
</li>
<li>
<span class="code">NODE</span>
<a href="https://LearnNode.com">Learn Node</a>
</li>
<li>
<span class="code">STPU</span>
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
</li>
<li>
<span class="code">WTF</span>
<a href="http://Flexbox.io">What The Flexbox?!</a>
</li>
<li>
<span class="code">GRID</span>
<a href="https://CSSGrid.io">CSS Grid</a>
</li>
<li>
<span class="code">LRX</span>
<a href="http://LearnRedux.com">Learn Redux</a>
</li>
<li>
<span class="code">CLPU</span>
<a href="http://CommandLinePowerUser.com">Command Line Power User</a>
</li>
<li>
<span class="code">MMD</span>
<a href="http://MasteringMarkdown.com">Mastering Markdown</a>
</li>
</ul>
</li>
<li>
<a href="#">Other Links</a>
<ul class="dropdown dropdown3">
<li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
<li><a class="button" href="http://wesbos.com">Blog</a></li>
<li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
</ul>
</li>
</ul>
</nav>
能看到上方的html里有一个大<ul>
包着三个<li>
,我们必须对这三个<li>
做监听事件,所以当滑鼠移到不是<li>
的时候<li>
会消失!
所以我们先选取到这三个元素
const triggers = document.querySelectorAll('.cool > li');
const background = document.querySelector('.dropdownBackground');
const nav = document.querySelector('.top');
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
并且让这三个<li>
都绑定滑鼠进入以及离开的事件我们先处理滑鼠进入的时候要显示下方白色区块,当没有在<li>
的时候就会关掉下方白块
function handleEnter() {
this.classList.add('trigger-enter');
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
background.classList.add('open');
在我们的触发mouseenter
的函式,我们要完成 CSS style更换,作者已经有将要触发的class写在档案里,我们要做的就是移除或是新增class,并且在出现白色区块的时候,透过延迟setTimeOut
来做到延迟的效果,延迟一下子在将白色区块内的内容显示出来,因此要加上两个 class ,第一个先将 display:none 拿掉,然後再透过setTimeOut
把透明度拿掉,显示出文字内容! 最後如果滑鼠移开了移除整个白色区块。
const dropdown = this.querySelector('.dropdown');
const dropdownCoords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();
const coords = {
height: dropdownCoords.height,
width: dropdownCoords.width,
top: dropdownCoords.top - navCoords.top,
left: dropdownCoords.left - navCoords.left
};
在接下来我们抓到有.dropdown
这个class的元素,并且抓到透过.getBoundingClientRect()
抓到他以及nav
的height
、width
、top
、left
,要删除到nav的top
以及left
是为了让白色区块准确的贴在li
下方。
background.style.setProperty('width', `${coords.width}px`);
background.style.setProperty('height', `${coords.height}px`);
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
}
最後指定白色区块的宽高等於原本dropdown
的宽高就可以了!
function handleLeave() {
this.classList.remove('trigger-enter', 'trigger-enter-active');
background.classList.remove('open');
}
最後写handleLeave
滑鼠离开的时候删掉这两个class并且让选单消失!
今天就讲解到这边,谢谢大家!
<<: [Day29] 实战 - 三关价偏多且 KDJ 维持多头排列
Hey guys, 第七篇就来实作一遍,「以传统统计方法」预测多变量时间序列吧 虽然 VAR 的准确...
先读References: 很酷的网页: https://www.sinotrade.com.tw/...
ThemeForest 布景主题有 40,000 多个,琳琅满目 暨上篇文章【领域展开 08 式】 ...
试算表不是只有 GoogleSheet 跟 Excel ... 爲什麽试算表需要多人协作? 在不能多...
485. Max Consecutive Ones https://leetcode.com/pro...