我在 How can I dynamically create derived classes from a base class 上有一个简单的 jquery 切换按钮:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
</style>
<script type="text/javascript">
//Need an expert? I'm cody childers, cut-n-paste extraordinaire
$('#contact-info-button').click(function() {
$('#contact-info').toggle();
});
function toggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width = window_width / 2 - 150; //150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
setInterval(function() {
if ($('#myDiv').hasClass('divClassRed')) {
$('#myDiv').addClass('divClassBlue').removeClass('divClassRed');
} else {
$('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
}
}, 1000);
</script>
</head>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<p>trollface pic in here</p>
<a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>
<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a>
</p>
<button href="#contact-info" id="contact-info-button">Contact Info</button>
<div id="contact-info" style="display: none;">
<p>jon_do@example.com</p>
<p>512-736-5555</p>
</div>我正在尝试让 contactinfo 按钮正常工作。我在 DOM 中没有收到任何错误。
最佳答案
我看到它有效。你在 html 中犯了一些错误。喜欢</style>没有任何 <style> 的结束标签开始标签。没有 <body>标签等。请看这里:
//Need an expert? I'm cody childers, cut-n-paste extraordinaire
$('#contact-info-button').click(function() {
$('#contact-info').toggle();
});
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-150;//150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
setInterval(function(){
if($('#myDiv').hasClass('divClassRed')){
$('#myDiv').addClass('divClassBlue').removeClass('divClassRed');
}else{
$('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
}
},1000);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<p>trollface pic in here</p>
<a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>
<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a></p>
<button href="#contact-info" id="contact-info-button">Contact Info</button>
<div id="contact-info" style="display: none;">
<p>jon_do@example.com</p>
<p>512-736-5555</p>
</div>关于javascript - jQuery 切换不能与附近示例中的许多其他 JavaScript 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42049800/