在Javascript (HTML/ Css /Javascript)中触发单击函数时，CSS可见性属性不会切换

在JavaScript中，当你尝试通过单击事件切换CSS的visibility属性时，可能会遇到一些问题。以下是一些基础概念以及如何解决这些问题的详细说明。

基础概念

CSS可见性属性 (visibility):
- visible: 元素是可见的。
- hidden: 元素是不可见的，但它仍然占据页面上的空间。

JavaScript事件处理:
- 使用addEventListener来绑定事件。
- 在事件处理函数中修改元素的样式。

常见问题及原因

问题: 点击事件触发后，CSS的visibility属性没有切换。
可能的原因:
- JavaScript代码中没有正确获取到元素。
- 事件处理函数没有被正确调用。
- CSS属性名拼写错误或使用了错误的值。

解决方案

以下是一个完整的示例，展示了如何在点击按钮时切换一个元素的visibility属性。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Visibility</title>
    <style>
        #targetElement {
            visibility: visible;
            padding: 20px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Visibility</button>
    <div id="targetElement">This element's visibility will be toggled.</div>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('toggleButton');
    const targetElement = document.getElementById('targetElement');

    toggleButton.addEventListener('click', function() {
        if (targetElement.style.visibility === 'hidden') {
            targetElement.style.visibility = 'visible';
        } else {
            targetElement.style.visibility = 'hidden';
        }
    });
});

解释

HTML部分:
- 定义了一个按钮和一个需要切换可见性的元素。
- 使用内联样式设置了初始的visibility属性。

JavaScript部分:
- 使用DOMContentLoaded事件确保DOM完全加载后再绑定事件。
- 获取按钮和目标元素的引用。
- 在按钮的点击事件处理函数中，检查并切换目标元素的visibility属性。

应用场景

这种切换可见性的技术常用于：

模态框: 显示/隐藏对话框。
导航菜单: 展开/折叠子菜单。
工具提示: 显示/隐藏提示信息。

注意事项

确保元素的ID在HTML和JavaScript中一致。
检查CSS属性名是否拼写正确。
如果使用外部CSS文件，确保样式正确加载。

通过上述方法，你应该能够成功地在JavaScript中通过单击事件切换CSS的visibility属性。如果仍然遇到问题，请检查控制台是否有任何错误信息，并确保所有元素和脚本都正确加载。

在Javascript (HTML/ Css /Javascript)中触发单击函数时，CSS可见性属性不会切换

、、、

我正在尝试制作一个响应式的汉堡包菜单，然而，在菜单编码的最后部分，我遇到了障碍…… 我已经尝试了我能想到的所有方法。由于某些原因，我的菜单不会完全消失或显示，因为我对代码所做的调整。在最后的调整中，菜单是不可见的，因为我已经指定它不在代码中，但是当我单击菜单按钮时，菜单不会切换。">Home</a></li> <li><a href="

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

3回答

当另一个div可见时显示div

、

我正在尝试使隐藏的div在计时器上的div出现时可见。这是可行的吗？如果问题不清楚，请告诉我，我可以试着换个说法。以下是我目前掌握的一些Jquery if ( $('.homePromo').filter(':visible'){ $('.specialSignup').css('display

浏览 0提问于2013-02-08得票数 0

2回答

从OnClick按钮显示表单

、

当我点击一个按钮时，我正试图将一个表单显示为弹出窗口。我是一个新的反应对象，我真的不知道从哪里开始。/> </div> </div>}import React from 'react'; import

浏览 3提问于2021-08-26得票数 0

4回答

数据绑定中的KnockoutJS值切换

、

我有一些javascript： var self = this;以及补充它的html： random string我想要达到的目

浏览 7提问于2013-02-14得票数 21

回答已采纳

4回答

使用CSS可见性淡入:可见？

、、、

我希望在单击<a>链接运行javascript以显示和隐藏div时具有淡入效果，但我非常希望继续使用visibility元素来切换div可见性。有没有办法用HTML/CSS/JavaScript/jQuery做到这一点？

浏览 5提问于2012-11-13得票数 6

回答已采纳

2回答

CSS检查不工作

、、

HTML元素：这个div已经用display:none隐藏起来了，我想切换可见性以显示@Html.EditorFor( new {

浏览 8提问于2015-10-29得票数 0

回答已采纳

2回答

更改元素的可见性时不会调用事件

、、

我有一个页面，需要定期切换div的可见性。问题是，与某个父元素相关的单击事件通常不会被调用。如果我停止了可见性切换或者减慢了速度(比如300ms而不是100ms)，点击事件就会被正常触发。你可以在这里测试它：理论上，点击蓝/红方块应该会触发点击事件。当没有动画时(这里的默认行为)，单击蓝色方块将始终触发onclick事件。如果你点击“播放/暂停”，红色方块的可见性</e

浏览 0提问于2012-05-06得票数 3

回答已采纳

2回答

如何在GTM中样式更改时触发元素可见性

、、、

我有一些JavaScript代码，它将下面的div样式从display: none更改为display: block。class="myClass" style="display: none;"></div>到<div class="myClass" style="display: block;"></div> 当元素可见性触发时此触发器应在样式更改时触发<

浏览 0提问于2018-07-10得票数 0

3回答

JS onClick事件忽略第一次单击，每次后续单击都有效。

有一个非常奇怪的问题与一个简单的div可见切换脚本。控制台上没有错误输出。<!如果我将一个警报(listC

浏览 3提问于2021-09-16得票数 1

回答已采纳

1回答

Javascript -显示和隐藏带有按钮的表行

另外，我希望按钮文本在Info和Info▲之间进行更改，就像我的脚本中的第一个一样。 --这是我布局的一个简单版本。因此，当我按下第一个信息按钮时，下面的行应该出现在一个图像中。我的剧本。

浏览 1提问于2014-08-04得票数 0

2回答

如何使用水瓶和Jinja2模板更改HTML属性？

、、、

我有用于折叠/展开外层表中每一行的嵌套表的按钮。是否有一种方法可以更新Jinja2循环中按钮上的变量？或者一种改变HTML属性的方法(样式、可见性和隐藏)？HTML：<tr> <butto

浏览 4提问于2022-07-26得票数 2

回答已采纳

5回答

我有几个输入元素，并且我正在使用jQuery设置一个单击处理程序，该处理程序将调用jQuery的append()、html()或text()函数。处理程序会触发，它会显示一个debug alert()，但我试图附加的文本不会显示在文本区域中。当我在Firebug中检查textarea时，我看到作为textarea的子级附加的文本--但它是暗淡的，就像元素的样式设置为display:none时一样。但是Firebug的

浏览 0提问于2009-08-26得票数 3

回答已采纳

2回答

我需要帮助打开菜单上点击href链接在html？

、、

我从最近几天开始试着打开megamenu，点击ahref链接，在做了一些代码检查之后，我在css中找到了一些提示，如果我使可见值变为可见值，megamenu就不会显示，我希望该菜单只在单击鼠标时打开，它现在是在悬停事件上打开的

浏览 6提问于2022-06-28得票数 1

2回答

我需要h2元素以小屏幕大小关闭

、

span></span></h2>当我预览一个页面时，它的工作原理很完美，但我想修改它，这样当有人在移动设备中查看页面时，默认情况下一切都会关闭。然后，用户将选择一个特定的h2标题并单击它来读取该部分。@m

浏览 3提问于2016-02-15得票数 0

回答已采纳

4回答

使用jQuery，如何使用函数使div对象可见？

、、、

bold; max-width: 400px; margin-right: auto;在调用以下函数时

浏览 1提问于2018-01-24得票数 0

回答已采纳

4回答

不可见但可点击的下拉框？

、、、、

在css/jquery中可以做到这一点吗？如果没有打开，应该不会显示任何内容。如果它是打开的，则只显示下拉菜单，而不显示当前选定的。编辑:当它打开时，我希望它看起来像右边，而不是左边：

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

回答已采纳

3回答

内容切换问题

我希望某些信息在默认情况下被隐藏，并在点击项目时显示出来。我从网络上抓起了一个切换脚本，但出于某种原因，它正在做的与我想要的相反。

浏览 3提问于2014-12-05得票数 1

回答已采纳

2回答

单击按钮时显示窗体

、、

我正在尝试建立一个应用程序，其中用户可以按下右上角的按钮(见图片)，这将隐藏一个div (主题)，并显示另一个div (一个表单，我可以添加一个新的主题)。if(isset($actiefboardid)){ if(count($toppic)>0){ echo "<div class='user-block'>";

浏览 2提问于2018-05-07得票数 1

2回答

函数在调用事件时不能工作。

、

试图使容器的可见性在单击时发生变化。可见性设置为隐藏在CSS中，表单位于div中。任何帮助都很感激。我还尝试使用display属性，并将其设置为none或compact，而不是可见性，但仍然没有更改。JavaScript：function displayCont()

浏览 1提问于2014-02-06得票数 0

回答已采纳

2回答

单击事件传播到Firefox中带有pointer- events ="visible“的隐藏SVG图像

、

看起来SVG对象属性"pointer-events“的"visible”值在更新版本的Firefox中并没有得到尊重(在v34和v35中得到了确认)。我在SVG中嵌入了具有以下定义的图像： <image x="10" y="10" id="svg-image1" width="300" height="200" xlink:href="

浏览 1提问于2015-01-15得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

在Javascript (HTML/ Css /Javascript)中触发单击函数时，CSS可见性属性不会切换

基础概念

常见问题及原因

解决方案

HTML

JavaScript (script.js)

解释

应用场景

注意事项

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐