升级到Bootstrap 4、jQuery 3.3.1后，jQuery .show() /.hide()无法工作
升级到Bootstrap 4、jQuery 3.3.1后，jQuery .show() /.hide()无法工作的原因可能是由于Bootstrap 4和jQuery 3.3.1之间的一些兼容性问题导致的。在Bootstrap 4中，它引入了一种新的CSS类来控制元素的显示和隐藏，这可能与jQuery的.show()和.hide()方法产生冲突。
解决这个问题的方法是使用Bootstrap 4提供的CSS类来替代jQuery的.show()和.hide()方法。在Bootstrap 4中，可以使用以下CSS类来控制元素的显示和隐藏：
- .d-none：用于隐藏元素，相当于.hide()方法。
- .d-block：用于显示元素，相当于.show()方法。
例如，如果要隐藏一个元素，可以将其CSS类更改为.d-none，如下所示：
<div class="d-none">要隐藏的内容</div>如果要显示一个元素，可以将其CSS类更改为.d-block，如下所示：
<div class="d-block">要显示的内容</div>这样就可以在升级到Bootstrap 4、jQuery 3.3.1后正常控制元素的显示和隐藏了。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建、部署和扩展云服务器实例。了解更多信息，请访问：腾讯云服务器（CVM）产品介绍
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，可用于存储和管理各种类型的数据。了解更多信息，请访问：腾讯云对象存储（COS）产品介绍
相关·内容
2回答
如何显示和隐藏Bootstrap警报？
我尝试过使用$().alert("open")，但似乎无法解决这个问题：
// Hide the alert when DOM loads:
$("#alert").alert("close");
// Show alert on given info click:
$("#info").click(function() {
console.log("Got clicked");
$("#alert").alert();
});
<link
浏览 0提问于2019-07-29得票数 0
我试图用箭头切换div；这是我到目前为止拥有的代码：
$('.hide-show').hide();
$('.toggle-year').on('click', function() {
$(this).html($(this).text().substr(0, 4) == 'Hide' ? '▼' : 'Hide ▲');
$('.hide-show').toggle('slow');
});
<script
浏览 12提问于2020-09-16得票数 1
回答已采纳
我最近才开始学习jquery，这就是我正在尝试做的:我向按钮选择器添加了一个click事件(通过标记名)，只是为了执行文本和类的简单切换。 文本部分使用条件语句可以很好地工作，但是如果我尝试在btn-danger和btn-success之间切换类，我无法正确设置它，也不知道要更改什么。 <html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&
浏览 23提问于2019-10-16得票数 0
回答已采纳
为什么bootstrap不能在javascript内部工作，而能在外部工作。
下面是我的代码：
var date = new Date();
date.setDate(date.getDate());
$('.datepicker').datepicker({
startDate: date,
autoclose: true,
format: "mm-dd-yyyy",
todayHighlight: true,
orientation: "top auto",
浏览 32提问于2016-09-09得票数 0
回答已采纳
我在某个时候让它工作，但它停止工作，我不知道为什么。
一旦我点击按钮，模式将打开与文本加载...其他的事情都没有发生。我能够看到所选域的whois数据。这就是我应该能在modal中看到的：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<me
浏览 1提问于2015-08-23得票数 0
2回答
我有一个html元素，它有一个标题title ="This is a tooltip"和类class="tooltips"。
在我的script.js中有以下代码(只是为了演示我的问题)：
var timeout;
$('.tooltips').mouseenter(function(){
var that = $(this);
if(timeout){
clearTimeout(timeout);
}
timeout = setTimeout(function(){
that.tooltip('
浏览 1提问于2016-08-08得票数 1
回答已采纳
当我点击一个按钮，我希望我的div动画。看上去只有动画在工作，而不是隐藏。即使属性值发生变化，隐藏动画也根本无法工作。
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display:
浏览 3提问于2019-12-03得票数 0
回答已采纳
1回答
我正在尝试访问一个复选框的状态，该复选框是使用引导开关()和带有Rails的引导开关gem生成的。有了这个，我的目标是显示/隐藏某些div。
我让它为标准单选按钮工作，但对于已被更改为开关的复选框，我无法计算出来。任何帮助都是非常感谢的。
对我的表单使用简单的表单gem：
<%= f.input :legal_protection, label: "Add Legal Protection", input_html: { name: 'my-checkbox' }, checked: false %>
联署材料：
// Show/hide L
浏览 3提问于2017-06-09得票数 0
回答已采纳
1回答
JQuery进度条动画
、、、、
尝试使用jquery和javascript显示进度条，但未显示。 var show_time = Math.floor(Math.random() * 10000) + 5000;
setTimeout(function() {
$("#progress").hide()
}, show_time);
var myCountdown = $('#progress').progressBarTimer({
autostart: true, // default false
timeLimit: show_time,
baseStyle:
浏览 14提问于2019-05-01得票数 2
回答已采纳
1回答
我正在努力让timeout计时器在每次与document click交互时重置。clearTimeout似乎不工作。 jquery： $(document).click(function(e){
$("#vidBack").hide();
$(".mainer").show();
function stopTimer() {
clearTimeout(timer);
}
var timer = setTimeout(function(){
$(".bury").hide();
$
浏览 9提问于2019-05-25得票数 2
回答已采纳
var switchProductDetailsToCartModal = function (target){
$('#productDetailsModal').modal('hide'); // 'hidden.bs.modal' was not triggered here
$('#carousel-example-generic').carousel('pause');
//
}
//'hidden.bs.modal' handler triggered he
浏览 4提问于2015-06-18得票数 0
回答已采纳
我正在使用API通过AJAX/jQuery加载数据。当我点击按钮时，我想要显示一个div，另一个隐藏，但是我无法用我所拥有的代码工作，有什么想法吗？
$(function() {
$("button").click(function() {
$(".groups").show("");
});
$(".matches").hide("");
});
.groups {
display: none;
}
<script src="https://cdnjs.cloudflar
浏览 1提问于2019-07-15得票数 0
回答已采纳
超级简单的代码，但我不能让它工作。试图隐藏和显示我的div播放器，但无法使其工作。 提前感谢 $(document).ready(function() {
$(".player").mouseover(function() {
$(".player").hide("blind", { direction: "down" }, 1000);
});
$(".player").mouseout(function() {
$(".player").show("bl
浏览 19提问于2019-05-06得票数 1
回答已采纳
1回答
如何显示freeow或模式警报？
、、、、
我想使用Freeow或Modal alert显示错误。PHP正在使用AJAX来填充一些选择输入下拉框。我使用noConflict并为每个插件创建一个变量(Freeow和Modal)。
JavaScript警报可以工作，但显示Freeow或Modal的调用不起作用。我做错了什么？
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src=
浏览 0提问于2015-11-08得票数 0
以下代码工作正常(从w3schools.com复制)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("span").hide();
浏览 0提问于2019-04-26得票数 0
回答已采纳
我正在使用一个jQuery函数来隐藏表单焦点上的占位符文本，这个函数在主页(Index.php)中的表单上工作得很好，但是它不能在使用bootstrap (Members.php)设计的其他表单上工作。我试着找出问题出在哪里，但似乎行不通。我不知道是不是Bootstrap和jQuery的版本不兼容导致了这个问题？！我使用- jquery-3.4.1.min.js - bootstrap-3.3.7
=Backend.js==
// here is the jQuery function
$(function(){
'use strict';
// Hide
浏览 21提问于2019-11-30得票数 1
回答已采纳
1回答
我在引导4中有隐藏模式的问题。在我的tmp函数中，我必须关闭模态，然后我需要使用方法update_table(url)。
HTML和JS
<div class="modal" id="Modal" tabindex="-1" role="dialog"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
浏览 2提问于2018-07-12得票数 5
我有一个输入文本标签和一个文本区，在输入的变化和点击文本区工具提示是shown.But默认情况下悬停的输入文本标签的工具提示不应该显示。我已经为工具提示添加了一个悬停隐藏，但它仍然不起作用 $( "#sub-proj" ).change(function() {
$("#description").click(function(){
$('#sub-proj').tooltip('show');
})
})
$( "#sub
浏览 13提问于2020-10-23得票数 1
回答已采纳
2回答
我有一个按钮。我试图用一次点击切换2个div。下一个是逻辑：
，先单击隐藏框1和显示框2，然后单击隐藏框2显示框1
这是我尝试过的，但只适用于第一次单击，如果取消注释代码，您将看到，而不是检查框2的可见性。
<a class="toggle-btn">TOGGLE BUTTON</a>
<div class="business-accordion">
<h4>Business Accorodion</h4>
</div>
<div class="customer-a
浏览 4提问于2022-08-24得票数 0
我在下面的div show hide中遇到了问题。它在jfiddle上运行良好，但在页面上添加时停止工作。我正在使用bootstrap和wordpress，所以我不确定它是不是有些冲突。有人知道这是怎么回事吗？
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
//<
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
