在导航链接上的Onclick事件触发汉堡图标上的css动画

文章/答案/技术大牛

发布

2回答

javascript、html、css

当我点击一个导航链接时，我正在尝试触发我的汉堡图标上的css动画。单击图标本身即可正常工作(更改为X并返回到汉堡包)。我希望X在点击navlink时再次变成汉堡，因为现在只有导航关闭，X保持不变……在下面你可以找到我的汉堡图标的代码 <div class="row"> <input type=&quo

浏览 32提问于2019-08-31得票数 1

回答已采纳

1回答

CSS转换与jQuery .animation() vs JS切换类？

javascript、jquery、css

我是一个新手，试图创建一个动画移动菜单，我想知道是否有一个更好的方法来做到这一点。我的导航菜单在一个<ul>中，默认情况下它是隐藏在屏幕外的 (right: -100vw)，我有一个未使用的类.open，它有规则right: 0。我还在我的transition-delay中的每个<li>上都有一个独特的<ul>。transition:right 1s; }l

浏览 3提问于2020-12-26得票数 1

2回答

通过javascript在单击上触发CSS动画

javascript、html、css、css-animations

我有一个简单的汉堡包图标，我想通过纯javascript触发CSS动画(请不要使用jquery )。我是通过添加和删除汉堡包图标上的一个类来实现的，当我添加CSS动画的类时，但是当我删除这个类时，动画不会发生，汉堡包线在没有动画的情况下突然回来。基本上，我希望动画反转，回到原

浏览 4提问于2020-08-07得票数 1

回答已采纳

1回答

按钮看起来和感觉就像被按下了

angular、bootstrap-4

在PC上查看没有问题，但在智能手机上查看时，当我按下按钮时，按钮就会保持按下。在按下按钮后，如何将显示更改为正常，就像在PC上一样？

浏览 2提问于2020-05-11得票数 2

1回答

重写JS代码以响应- classList.toggle

javascript、css、reactjs、onclick

我想重复使用我的JS代码从旧的应用到我的新-但新的一个是使用React，而不是只是香草JS。这是代码，应该触发打开汉堡包导航菜单和转换/动画他们。fo

浏览 1提问于2021-06-04得票数 0

1回答

不使用Element.animate()的Javascript事件

javascript、html、css、animation

我试图使用Javascript中的Element.animate()方法向我的网站添加动画，但意识到动画事件不会在动画运行时触发。这是我的代码： let list = document.querySelector(".list"); }); list.addEvent

浏览 2提问于2021-08-15得票数 1

回答已采纳

2回答

当您关闭hamburgerCSS sidenav时动画MaterializeCSS？

javascript、jquery、html、css

我使用汉堡包css 作为我的汉堡包菜单在我的网站。打开和关闭动画工作良好，它正确地打开/关闭材质。我找不到sidenav关闭的状态。我相信最好的方

浏览 7提问于2017-03-21得票数 2

1回答

javascript查询选择器不会在单击按钮时切换css设置

javascript、html、css

我正在尝试切换CSS状态，以便在单击动画汉堡按钮时显示菜单。由于某些原因，我的脚本不会将导航的transform: translateX从0切换到100%。我尝试过onClick和事件侦听器。我是不是漏掉了什么很明显的东西？ transform 0.5 ease-in; transform: translateX(0%); } <button class="burger&q

浏览 11提问于2019-05-08得票数 0

回答已采纳

2回答

为什么鼠标指针变为箭头而不触发图标上的单击事件？

javascript、css、asp.net-core、cursor

我在MVC Core应用程序中使用了一个图标。当我将鼠标悬停在图标上时，它应该会显示工具提示，并让我在单击时触发事件。我将css属性指针设置为"pointer“。在我的例子中，当我将鼠标悬停在图标上时，光标不断地从指针快速切换到箭头。因为它正在变成一个箭头，所以我无法触发单击事件。我完全糊涂了。'fa fa-plus-square fa-lg displaytooltip&#x

浏览 0提问于2020-05-27得票数 0

1回答

为什么向HTML页面元素添加CSS类会中断Turbolinks获取的页面上的滚动？

jquery、ruby-on-rails、turbolinks

在一个涉及Turbolinks的Rails遗留项目中，我遇到了一个非常有趣的bug。下面是对这个bug的描述：当我删除在单击导航时将CSS类添加到html元素的ht

浏览 1提问于2018-09-14得票数 1

回答已采纳

2回答

将CSS和HTML汉堡菜单转换为react组件

javascript、html、css、reactjs、hamburger-menu

我正在遵循使用css，html和javascript创建动画导航栏和汉堡包manu的教程，我想为我的项目创建导航栏作为react组件。我试图隐藏的代码如下所示，它是一个嵌入在html中的带有标签的app.js文件： const burger = document.querySelector/a>

浏览 34提问于2019-07-12得票数 1

回答已采纳

1回答

指向正文的addEventListener以切换回导航栏

javascript、html、css、navbar、responsive

我正在努力寻找一种方法，将事件侦听器添加到文档中，使导航栏在不必到达汉堡菜单的情况下切换回来。我一直在考虑使用： document.body.addEventListener("onclick", function{ } ); 但我不知道该怎么提到触发效应 const navSlide

浏览 18提问于2020-04-22得票数 0

1回答

CSS动画汉堡包图标和删除类卷轴？

javascript、html、css、css-transitions

我想在响应小屏幕大小时实现两件事：希

浏览 2提问于2015-02-09得票数 0

回答已采纳

1回答

CSS FadeIn和FadeOut只点击css (100%纯)，如果不可能，尽可能减少资源(没有jquery，也没有js到动画)。

css、css-animations

当我单击hamburguer菜单显示侧边栏时，我试图制作一个100%纯css动画、fadein和fadeout (背景应该显示500毫秒的不透明度)(类似jquery )，当我在侧栏内单击关闭菜单时(背景应该在这是一个非常简单的代码，为了打开菜单，我将事件放在汉堡包图标onclick=‘$(’#菜单项-背景‘).fadeIn(500)；’接近关闭时，我将onclick=‘$(’#菜单-背景‘).fadeout(2000年)；如果不可

浏览 5提问于2022-05-13得票数 -1

1回答

我在触发这个类列表切换时有问题

javascript、reactjs、dom

我试图触发这个CSS打开的反应教程是在HTML，但我不能使用addeventlistner或使用document.queryselector，所以我添加了一个onClick事件，它应该处理这两个问题，现在，我只需要切换这个Class.Please，不标记这一点，因为已经回答的问题是jquery和普通的html相关的。navLinks.classList.toggle("open") // }

浏览 0提问于2019-08-11得票数 0

回答已采纳

2回答

HTML onclick参数

html

摘录来自： onclick="document.storeLocatorForm.submit();return false;"><\/a> 我知道它肯定有一个简单的答案，但我在谷歌上搜索它并没有太多成功。我总是让人们问更复杂的问题。我在w3schools上学习了HTML和Jav

浏览 0提问于2011-10-08得票数 2

回答已采纳

1回答

鼠标退出div区域时自动折叠下拉导航

javascript、navigation、drop-down-menu

我做了一个简单的下拉导航，当你将鼠标悬停在链接上时，它会展开。我非常感

浏览 1提问于2011-06-08得票数 0

回答已采纳

1回答

棘轮Push.js不推

javascript、ratchet-2、ratchet-bootstrap

我已经在CodeIgniter之上构建了一个PHP，它的工作方式是将控制器移到控制器(.php文件)，而不是从一个静态页面转到另一个静态页面(.html文件)。在您询问-在我的系统上，booknav是一个可行的控制器，加载一个可行的视图点击它。而且-我可以看到这里的片段实际上是工作<e

浏览 9提问于2014-10-17得票数 4

回答已采纳

1回答

小屏幕上Bootstrap导航栏中的空格问题

css、twitter-bootstrap、navbar、whitespace

我正在帮一个朋友做她的网站，一切看起来都很好，除了导航菜单上的一个问题。当在手机上查看时(或者只是缩小浏览器窗口)，导航栏的高度会增大，logo会下落，在此过程中会留下太多的空白，从下面偷走它。最初，按钮类上没有“ml-auto”，汉堡包图标直接显示在屏幕左侧的徽标上方。经过广泛的测试，容器div似乎是问题的一部分。如果我把徽标放在容器外面，问题就会消失。然而，如果没有它，

浏览 37提问于2021-04-06得票数 0

回答已采纳

1回答

如何使用Framework7-React捕获JS代码中的Back按钮事件？

reactjs、html-framework-7

我需要在我的代码中捕获返回按钮事件只为特定的页面。因为我正在使用Framework7 NavBar react组件，所以我找不到可以覆盖/捕获back事件的地方。我指的是用于IOS应用程序开发的framework7-react，我已经在文档中放回了'Back‘链接。Framework7版本4.3.1 他们为导航栏提供了'backLink‘属性，但是我如何在我的JS代码中捕获事件呢？

浏览 23提问于2019-05-07得票数 1

点击加载更多