Js显示/隐藏函数->隐藏/显示
显示/隐藏函数是一种在前端开发中常用的技术，用于控制网页元素的显示和隐藏。通过使用JavaScript编写的显示/隐藏函数，可以根据特定的条件或事件来控制元素的可见性。
这种函数通常使用DOM操作来实现。在HTML中，每个元素都有一个style属性，可以通过修改该属性的display属性来控制元素的显示和隐藏。display属性有多个取值，其中包括"none"和"block"。当display属性设置为"none"时，元素会被隐藏，不占用页面空间；当设置为"block"时，元素会被显示出来。
以下是一个简单的显示/隐藏函数的示例：
function toggleElement(elementId) {
var element = document.getElementById(elementId);
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}在上述示例中，toggleElement函数接受一个参数elementId，表示要进行显示/隐藏操作的元素的ID。函数首先通过document.getElementById方法获取到对应的元素，然后判断该元素的display属性值。如果display属性为"none"，则将其设置为"block"，使元素显示出来；如果display属性为"block"，则将其设置为"none"，使元素隐藏起来。
显示/隐藏函数在实际开发中有广泛的应用场景，例如实现网页中的折叠展开效果、控制弹出框的显示和隐藏、切换不同的页面内容等。
腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括云服务器、云函数、云存储等。您可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
我想做一些事情，比如当我点击网页上的一个按钮时，它会显示一个可扩展列表，而不是从一开始就显示可扩展列表。我所做的是使用库mktree.js和mktree.css
<script src="mktree.js" language="javascript"></script>
<link rel="Stylesheet" href="mktree.css" />
然后创建一个静态标签和一个按钮：
<ul class="mktree" id="tree">&
浏览 1提问于2011-05-27得票数 0
在过去的一周里，我遇到了jCrop、无限滚动和jQuery UI，它们都给我带来了错误消息"Uncaught TypeError:无法调用未定义的方法'x‘“。我跟踪了所有的错误到一行--比如$el.hide().chain(stuff); --因为某种原因，显示和隐藏没有返回任何东西。
我下载了jQuery 2.0.3文件的未压缩副本，并开始放入控制台日志，结果变得非常奇怪。在showHide和jQuery文件中的显示/隐藏函数中，定义了返回值。但是，jQuery集合似乎一离开显示/隐藏函数就会丢失。下面是我在Chrome浏览器控制台上测试它的一个例子。
console.lo
浏览 3提问于2013-12-16得票数 1
回答已采纳
2回答
我有一个基本的高度表，我在一个模式中显示。它看起来呈现在基本的html中，但一旦显示了模式就不会显示(除非我告诉浏览器做一些事情，比如只需调整窗口大小或通过执行插件来重画)。老实说，我不确定这是DOM还是js。火狐、Chrome和Safari mac也是如此。有没有什么简单的东西可以在点击或点击时“勾引”窗口?？我使用的是bootstrap js标准模式代码
浏览 1提问于2013-01-16得票数 0
2回答
有没有更有效的方法来编写下面的脚本？它所做的就是更新一个项目的计数，然后根据它找到的数量显示该计数的单数或复数文本。
代码似乎是多余的：“显示这个，隐藏这个，除非相反的是真的，否则隐藏这个，显示那个”。难道不应该有一种方法来将布尔值传递到应该根据它来显示或隐藏的东西中吗？
var includedCount = $("#services").find("tbody tr td:nth-child(1) :checkbox:checked").length;
var requiredCount = $("#services").find("
浏览 9提问于2011-07-26得票数 0
回答已采纳
开发一个即将到来的Bigcommerce商店的自定义模具主题，我遇到了一些问题。我对JS模块加载/ES6概念比较陌生，但是已经通过jspm添加了一些额外的JS包(如模板中所包含的)。我遇到的问题是，在页面完全呈现之前，这些新的包不会发挥它们的魔力。因此，例如，我正在使用一个模态弹出程序包animatedModal.js，它是一个jQuery包。它已经安装好了，可以正常工作了，但是无论我在模块加载器的什么地方实例化这个包，模式内容都会在页面上显示大约2秒，然后才会被隐藏并正常工作。我用来导航的jQuery包mmenu也是如此。
这甚至不是一个FOUC，因为就像我说过的，在页面完全呈现之前，这些插
浏览 0提问于2016-02-10得票数 1
3回答
可能重复：
在ext js网格中，我需要隐藏/显示基于cond = true/ false的列。
我可以动态设置列的“隐藏”属性吗？
浏览 3提问于2011-03-21得票数 3
回答已采纳
我的cordova应用程序不再有价值了。它在应用程序运行时显示角度表达式。在启动时显示白屏，我认为这可能是JS依赖的问题。我发布了我的JS依赖项顺序
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js" type="text/javascript"></script>
<script src="lib/angular/angular.js" type="text/ja
浏览 0提问于2016-03-18得票数 0
我有一张小卡片。当我点击图标时，我试图显示它：
<div class="card">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a href="#" class="card-header-icon" aria-label="more options" id="serve
浏览 1提问于2020-02-19得票数 0
回答已采纳
1回答
<div class="col-md-4">
<h2>Twitter</h2>
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/Ollie_ODonnell" data-widget-id="557643946772664322">Tweets by @Ollie_ODonnell</a>
浏览 3提问于2015-01-20得票数 2
我有一个简单的HTML：
<input type="text" id="lk" />
<div id="showDiv">
<input type="radio" name="lki" id="lki1" value="lki1"> <label for="lki1">Anywhere</label>
<input type="radio" name="lki&#
浏览 2提问于2017-09-30得票数 0
回答已采纳
我有4个控制器，index.js，token.js，main.js和token.js。索引检查身份验证，如果未找到详细信息，则重定向到token.js以获取用户详细信息。如果身份验证通过，它将打开包含用户详细信息的main.js。现在，就在token.js中的open()命令之后，我有下面这行代码来显示指示器的活动：
var dispIndicator = Alloy.createController('loader').getView();
dispIndicator.open();
现在，我没有使用timeout作为指示器，因为我想精确地知道在main.js进程之后何时完成
浏览 0提问于2014-07-09得票数 1
我在Django中使用Crispy-Form和Bootstrap。它工作得很好。现在，我希望有一个字段显示只有当另一个字段有输入。基本上，我有一个名为A visible的multpile select list和一个隐藏的text field B。一旦用户聚焦/选择A中的一个或多个值，B就会变得可见。如果没有选择，它应该会变得不可见。
残缺的表单是否具有此功能或编写JS的可能性？或者我必须在呈现表单的html页面中编写JS？
再见
浏览 0提问于2012-11-24得票数 6
我对角质很陌生。我按照下面的代码进行一个简单的搜索。
<!DOCTYPE html>
<html ng-app=EmployeeApp>
<head>
<script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3" src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="style
浏览 0提问于2016-11-01得票数 0
回答已采纳
我有一个JS脚本。如果我悬停在div.overlay显示的"a“元素上。但是我怎么能说“如果我不再在a元素上设置显示:阻止为空；？”
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$(".navbar-default .navbar-nav a").hover(function() {
$("#ov
浏览 2提问于2014-07-17得票数 0
回答已采纳
使用zepto.js，如何才能显示ul中的X个项目，隐藏其余项目，并仅在用户单击“显示更多”链接/按钮时才显示它们？
10倍！
浏览 1提问于2012-06-03得票数 1
1回答
我有js脚本的按钮，当我点击它时，显示社交图标，当我点击它的隐藏。但我想继续展示所有的社交图标。下面是我的js scipt.`//绑定社交按钮可以显示/隐藏社交图标框
$('#social-pop-out-trigger').click(function() {
var $allBoxes = $('.footer-pop-out-box');
if ($allBoxes.is(':animated')) {
return false;
}
浏览 10提问于2015-03-05得票数 0
Reactjs.如何在按钮和页面上隐藏结果
我知道这个问题听起来很基本，但我只是绝望了。下面的Reactjs代码显示用户记录。
这就是我想要达到的目标。
在以下情况下，如何使用reactjs隐藏结果：
1.)用户单击页面上的任何位置。
2.)当用户有隐藏按钮时。
有人能帮我吗。谢谢
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="build/react.min.js"></script>
<scr
浏览 0提问于2018-12-07得票数 0
回答已采纳
1回答
我有两个问题
如何显示初始消息和/或单击按钮。我所拥有的当前代码不断地显示消息。我希望它最初显示，一旦用户开始按下其他按钮，我希望消息“开始猜测”消失，只有在用户单击“开始超过”按钮后才会出现。
如何在用户单击“放弃”时显示正确的答案。
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<title>Template that uses Bootstrap</title>
浏览 4提问于2016-03-24得票数 2
回答已采纳
我试图添加一个简单的垂直滚动条( mCustomScrollbar )到Bootstrap3模式，但mCustomScrollbar不显示。我已经从mCustomScrollbar页面添加了js和css文件，并且在我的js文件中添加了$(".modal-body").mCustomScrollbar(); });，但没有添加任何内容。这是我的css看起来像.modal-body {position: relative;padding: 20px;max-height: 200px; }。不知道我做错了什么，任何帮助都将不胜感激。谢谢!
浏览 3提问于2013-10-10得票数 0
我正在尝试使用html、ccs、js和jquery创建一个内存游戏。我遇到的问题是，当我试图显示这个div时，如果答案是正确的，div就会像我想要的那样变得可见，但它不会消失。
我有树的情况，每个树都有问题：
$(".wrong").show(function(){
$(this).hide(1000);
});
浏览 4提问于2022-03-02得票数 0
我有电子应用程序，我试图隐藏或显示用户输入的标签。标签总是显示出来的。我正在尝试隐藏或显示教程
{
id: "tut",
label: "Tutorials",
submenu: [
{
id: "subTut",
label: "Tutorials",
click: async () => {
const { shell } = require("electron"
浏览 2提问于2021-05-06得票数 0
我有上传系统，这与JS很好的工作，但我想创造一些方法，如何处理它，如果JS是禁用的。然后我要显示默认的<input type="file">。通常我会用按钮“添加照片”来代替它。
有可能吗？
我的代码就在这里，但是如果我使用JQuery来隐藏类<input type="file">，那么就会显示出几毫秒的时间，然后就会被删除。我需要在页面加载之前销毁它。
HTML：
<button class="add-item__add-photo-btn">Add photos</button>
<inp
浏览 4提问于2022-08-26得票数 0
1回答
我有一个带有伪选择元素的表单。伪选择元素是下拉菜单.当单击下拉项之一时，将为该项赋值一个隐藏输入。我使用jQuery.validate来验证表单。一个简单的验证规则绑定到隐藏的输入。如果输入没有值，则为隐藏输入和伪选择提供一个错误类，并显示一个错误消息。
我的问题是，更改隐藏输入的值不会触发更改、键控或模糊事件。如果将错误状态应用于隐藏输入，则在输入给定有效值后，该状态仍保持不变。只有当表单再次提交时，才能正确验证输入。
由于jQuery.validate启用了对隐藏输入的验证，所以我想知道是否有一个配置或方法来处理这个问题。
编辑：
$form.validate({
ignore:
浏览 2提问于2014-12-01得票数 4
回答已采纳
3回答
我有一个简单的<a>标记，它对一些JS是隐藏的。(display:none)我查看了页面源代码，可以看到它并未隐藏，但是检查器将其显示为display:none (内联样式)
找不到JS代码中的类/id，以便隔离隐藏<a>的代码部分。
有没有工具或者固定的程序可以帮我调试这个？
浏览 0提问于2013-05-16得票数 10
回答已采纳
1回答
显示/隐藏基于ng视图内容的元素
、、、、
我有一个简单的div (类=蓝色)，只有当我定位为'two.html‘，而不是ngRoute中的一个'one.html’或'three.html‘时，我才想显示它。有人能找到解决办法吗？
HTML:
<html>
<head>
<!-- Start Required -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src=
浏览 7提问于2015-11-26得票数 2
1回答
我正在学习asp.net mvc 5。
我的dropdownlistfor工作得很好，并且基于它的价值显示了正确的字段。但问题是，当第一次加载页面时，它会显示所有字段。
的问题是:当第一次加载页面时，默认情况下不显示任何内容。
我的cshtml：
<div class="form-group">
<div class="col-md-10">
@Html.DropDownListFor(m => m.PaymentMethod, ViewBag.
浏览 2提问于2017-03-06得票数 1
回答已采纳
3回答
在我的应用程序中，当用户登录时，特定的user id存储在会话中。我想把这个id放在js file.In中这个js文件包含状态提供程序、工厂等。
js
var sessionValue = "'"+<%=Session["userId"]%>+"'"
alert(sessionValue)
但是它显示了一些错误(Unexpected)。
浏览 5提问于2016-08-29得票数 2
我不太了解Javascript，我正在尝试将这个show element脚本改成一个更好的slideToggle()动作，而不是直接弹出来。
目前，它揭示了隐藏的元素。所显示的元素取决于在html选择列表中选择了什么id。
下面是JS：
$('#business_type').change(function(){
$("#common >div").each(function() {
$(this).attr("style", "display: none;");
})
浏览 0提问于2015-04-08得票数 0
我有一个具有基本CRUD功能的asp.net应用程序。在我捕获客户详细信息的页面上，我有几个必填字段的asp.net验证器。我已经在表单的asp.net保存按钮上附加了一个JS确认框。问题是，当用户没有填写必填字段并单击保存按钮时，JS确认框出现，当单击ok按钮时，保存方法被成功调用，只有在这种情况发生后，asp.net验证器才会触发并显示所需信息已被遗漏。
如何在弹出JS框之前触发验证器？
浏览 2提问于2011-02-04得票数 0
2回答
我是react native和js的新手。
我想要在用户开始在任何时间/位置向上滚动时显示我的导航栏，并在用户开始在任何位置向下滚动时隐藏我的导航栏。
我的第一个方法是同时使用“动画”和“找出滚动方向”，但我失败了。有没有人能详细告诉我这是怎么实现的？
谢谢!
浏览 7提问于2017-08-07得票数 0
所以我是JavaScript的初学者。
我有一个简单的HTML文件，我试着用$("h1").hide()测试$("h1").hide()，我的问题是jQuery代码在HTML中工作，但是当我尝试将这些代码放入外部JavaScript文件testjs.js并通过script标记插入到head中时，它就不再工作了。为了明确起见，外部JavaScript文件是可以识别的，例如，当我将document.write("third test")放在外部JS文件中时，它将显示“第三个测试”。希望我已经说清楚了
<!doctype html>
<
浏览 1提问于2018-04-11得票数 0
回答已采纳
我对大多数形式的客户端编程都是新手。所以这个周末我会试着练习一下。
我创建了一个简单的ASP.net MVC3站点，并成功地让Ajax更新了带有部分视图的div。现在我尝试使用Jquery滑动动画来展示新的内容。
以下是我在布局页面中包含的脚本：
我添加了Jquery UI
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/
浏览 1提问于2011-06-27得票数 1
回答已采纳
我需要识别add to cart按钮并根据产品id禁用它(js和php) (这不是问题的真正目的，粗体才是真正的)
由于我没有找到任何解决方案，我想让管理员按下管理部分中的按钮，专用的tomy扩展，然后用js捕获按钮信息，然后保存它们。
为了做到这一点，我想在设计部分中显示产品页面的主体和每个主题的一个类别。。
我是这样检索主题和包的：
//Main package/theme
Mage::getStoreConfig('design/package/name')
//Reegex theme
$ob=unserialize(Mage::getStoreConfig('
浏览 4提问于2015-04-26得票数 15
我有一个简单的“显示/隐藏”按钮，它隐藏或显示内容。然而，在我的rails应用程序中，它只能在点击两次之后才能运行。我想让它，所以只需要一次点击是必要的。
application.js
//= require jquery_ujs
//= require tinymce-jquery
//= require_tree .
function showhide(){
var div = document.getElementById("correct_answer_choice");
if (div.style.display !== "none") {
浏览 1提问于2017-10-13得票数 0
回答已采纳
各位朋友：
我在一个相当复杂的网站上工作。我们有一个包含一些控件的更新面板。单击其中一个控件时，将打开一个jQuery对话框。
当对话框关闭时，我想用信号通知更新面板更改其显示。要做到这一点，我需要发回更新面板。
我知道该对话框有一个方便的回调事件，您可以将其与之挂钩。但事情是这样的。操纵对话框的javascript都在一个单独的.js文件中。我想继续让它保持独立。因此，执行回发的代码要么位于该.js文件中，要么作为参数注入到.js文件中的某个方法中。
我该怎么做呢？我该向.js文件方法传递什么呢？
非常感谢。
浏览 4提问于2011-11-09得票数 4
回答已采纳
1回答
我有一个使用NodeJS自动显示来自MySQL的信息的页面。如何使文本用户名或描述显示为引导警报，如"alert alert-info"？
<time></time>
<div id="container">Loading ...</div>
<script src="socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"&
浏览 1提问于2017-05-13得票数 0
1回答
如何使用“切换”按钮显示/隐藏以下外部.js文件的答案？如果我有权访问代码，我可以将答案包装在div中，但由于这是一个外部.js文件，这可能吗？
以下是小提琴和代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(f
浏览 2提问于2012-06-28得票数 0
回答已采纳
4回答
我有一个CSS模式在我的页面，是自动隐藏的JS，直到一个注册链接被点击。我的问题是，当页面加载时，模式在隐藏之前会短暂闪烁。
我已经在模式上使用了JS隐藏功能，但不确定如何防止页面加载上的闪存，而不禁用它在注册单击上显示的功能。
模态HTML：
<div id="openModal" class="modalDialog">
<div>
<a href="#close" id="close">X</a>
浏览 5提问于2015-03-20得票数 2
回答已采纳
2回答
如果一个特定的javascript没有完全加载，我不想显示html页面内容。当这个javascript加载时，我想显示空白页面。Javascript位于.js文件中，因此在html页面中如下所示：
<script src = "file.js"></script>
浏览 10提问于2018-08-25得票数 0
因此，我有一个div设置为显示:当页面第一次加载时没有显示。然后，我添加了一个js文件，将其设置为在按下按钮时变得可见。
因此，当按下按钮时，我可以切换可见性以工作，但现在当我添加js函数使其滑入页面时(而不是仅仅使其出现和消失)，它会使div显示在页面上加载，并将div的可见性设置为不隐藏？
如果有人知道为什么会发生这种情况，或者有什么办法可以解决它，那会有很大帮助的！谢谢!
js文件
var settingVisibility = false;
function showSettings() {
if (settingVisibility) {
document.
浏览 2提问于2015-02-28得票数 0
回答已采纳
我想使用javascript检查我的用户浏览器是否可以连接到facebook。如果可以，网页将显示粉丝页面的facebook元素。facebook用于插入facebook fanpage元素的原始代码是：
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="facebook.com/xxxxx" show_faces="true" width="380px"
浏览 0提问于2011-04-21得票数 0
回答已采纳
1回答
我需要一个脚本，显示在右上角或左上角的回放，就像在许多广告。我谷歌了它，但没有找到任何有用的东西。我所拥有的是一组在幻灯片中运行的图像，就像在线广告一样，当广告结束时，"Replay“应该会出现在顶部，单击它会运行ad again.Pleae帮助!！
编辑:我正在使用swissarmy.js的幻灯片的东西，我只需要重放按钮。
浏览 0提问于2010-09-29得票数 0
我编写了一个JS函数来隐藏HTML中的一些元素，并使用window.onload()调用该函数。但是存在一个问题，window.onload()在HTML加载完成后调用函数，这使得这些元素先在网页中显示，然后等待几秒钟它们就消失了。那我有没有办法在加载这个网页的过程中，一开始就把它隐藏起来呢？
下面是我的JS代码：
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = 'none';
}
window.onload = function (
浏览 2提问于2016-06-03得票数 0
我已经隐藏了我的div与hidden=“真”，这是有效的，但我想显示后，按一下按钮。
我使用Node.js，这个部分必须用Javascript编码。
html：
div class="sideDiv" hidden="true">
javascript：
我用show()试过了，但不起作用。
socket.on('loginInServer',function(data){
$('.sideDiv').show();
});
浏览 9提问于2016-11-22得票数 2
回答已采纳
1回答
我有一个有几个按钮的页面，每个按钮都有一个要显示的信息，我需要显示一个按钮信息，并通过单击按钮隐藏其他按钮。
我尝试了这段代码，我希望sec2会出现，所有类名为“节”的部分都会被隐藏，sec2切换时点击，但其他部分不会隐藏。
<button class="button1" onclick="myFunction1();hide()"></button>
<style>
.button1 {
background-image: url("http://s910698169.onlinehome.us/wp-conte
浏览 9提问于2022-11-17得票数 0
我有麻烦了..。jQuery只应该在每个h2下隐藏div，但是它也隐藏了那些h2。我该怎么办？
<!DOCTYPE>
<html>
<head>
<title>Yolo</title>
<script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<main>
<div class="faq">
<h
浏览 2提问于2015-01-19得票数 2
回答已采纳
1回答
我将用于file输入字段。以下是我的代码：-
<input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
<input id="input-upload-img2" type="file" class="file" data-preview-file
浏览 1提问于2016-06-07得票数 0
回答已采纳
3回答
我已经集成了一个Twitter feed到一个网站，如果不能到达终点位置(大概是http://twitter.com/something)，这个feed就不会显示。这是理想的，但是我有一个标题div直接放在提要之上，无论提要是否显示在页面上，它都保持可见。
如果无法访问#title，是否可以阻止显示div ( URL )？我发现了一些JavaScript代码片段，它们可以根据正在查看的文件的URL来隐藏一个div，但这在我的情况下似乎行不通。
HTML：
<div id="title">
<h3>Latest Tweets</h3>
浏览 3提问于2013-04-12得票数 0
回答已采纳
当我在html中使用隐藏和确认时。隐藏功能仅在Chrome中无法正常工作。当显示确认窗口时，"aa“元素不会隐藏。IE和FF工作得很好。
任何类型的建议都是值得感谢的。
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
<a id=
浏览 2提问于2016-12-14得票数 2
我需要为当前项目编写和管理大量的JavaScript代码。
我主要根据模块将它们分成多个.js文件。
所以，现在我有一个例子：
Map.js // deal with google map issue
Common.js // common functions that will share by all modules
User.js // user module js code
Geofence.js // geofence module js code
etc.....
例如，在我的User.js文件中
如果我想声明一个仅在User.js文件内部使用的函数，而不能被外部访问，该怎么办？我
浏览 2提问于2012-05-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
