这是我想要制作的内容:
- 点击“PORTFOLIO”;
- 平滑地将所有内容向下推;
- 新链接平滑地淡入;
- 再次点击“PORTFOLIO”,执行相反的操作;
我的当前代码:
$(function () {
$('[data-toggle]').on('click', function () {
var id = $(this).data("toggle"),
$object = $(id),
className = "open";
if ($object) {
if ($object.hasClass(className)) {
$object.removeClass(className)
} else {
$object.addClass(className)
}
}
});
});
#list {
display: none;
}
#list.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">A Empresa</a> </li>
<li><a href="#" class="hide" data-toggle="#list">Portfolio</a>
<ul id="list">
<li><a href="#">Comerciais</a> </li>
<li><a href="#">Residenciais</a> </li>
<li><a href="#">Institucionais</a> </li>
<li><a href="#">Edifícios</a> </li>
</ul>
</li>
<li><a href="#">Contato</a> </li>
</ul>
</nav>
有没有可能仅使用CSS而无需JS就能实现这一点?我完全不知道如何进行动画部分,我尝试了CSS转换属性,但没有成功。
另外,有关标记和JS的任何技巧?我不认为我正在按“正确的方式”进行操作......如果有任何提示,将不胜感激。