首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >CSS3 -transform:单击链接时翻译属性

问CSS3 -transform:单击链接时翻译属性
EN

Stack Overflow用户
提问于 2019-09-18 01:32:32
回答 2查看 105关注 0票数 0

我在手机上使用这个代码在我的网站上添加了一个导航栏(只是稍微编辑了一下,这样它就会从顶部向下滚动):

https://codepen.io/plavookac/pen/qomrMw

有没有办法让菜单在我点击链接时回滚(关闭)?我有一个带有锚点链接的单页网站,可以滚动到每个部分,所以如果菜单没有关闭我下面的内容幻灯片。

谢谢!

EN

回答 2

Stack Overflow用户

发布于 2019-09-18 01:46:15

有很多方法可以做到这一点。您可以使用这种方式。希望这不是最好的解决方案,但它的工作。

在ul标记中使用sidemenu ID,在每个li标记中使用list类。然后在脚本标记中使用以下JavaScript代码。

代码语言:javascript
复制
const elements = document.getElementById('sidemenu');
elements.addEventListener('click', function(e) {
  if (e.target.classList.contains('list')) {
    document.getElementById('sidebarMenu').style.transform =
      'translateX(-250px)';
  }
});
票数 0
EN

Stack Overflow用户

发布于 2019-09-19 17:46:29

它可能不是非常干净,但我用这个脚本解决了这个问题,这个脚本在单击链接后重新加载导航栏,在我的例子中运行良好

代码语言:javascript
复制
<script>
$(function() {
  $(".list").click(function(evt) {
     $("#mobile-nav").load("#mobile-nav")
     evt.preventDefault();
  })
})
</script>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57979345

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档