<分区>
<分区>
在我正在处理的网站上，我有按钮“.page-about”和“.page-contact”展开一个 div 以显示内容。如果 div 展开并且您单击另一个按钮，它会淡入和淡出内容。这很简单。
这在桌面上完美运行。在我的 iPhone 上，div 最初扩展得很好，但如果它已经扩展并且点击了另一个按钮，它会关闭 div 背景颜色，然后在内容转换时立即恢复(它是渐变)。内容完美地淡入淡出，只是背景因为某种原因给我带来了麻烦。这是javascript:
$('.page-about').click(function(e) {
e.preventDefault();
if ($('#bb').hasClass('expand')) {
if (contactvisible()){
$('#contact-p').removeClass().addClass('contact-hid');
$('#about-p').removeClass().addClass('about-vis');
} else {
$('#bb').removeClass('expand');
}
} else {
$('#contact-p').removeClass().addClass('hidden');
$('#about-p').removeClass().addClass('show');
$('#bb').addClass('expand');
}
});
$('.page-contact').click(function(e) {
e.preventDefault();
if ($('#bb').hasClass('expand')) {
console.log(aboutvisible());
if (aboutvisible()){
$('#about-p').removeClass().addClass('about-hid');
$('#contact-p').removeClass().addClass('contact-vis');
} else {
$('#bb').removeClass('expand');
}
} else {
$('#about-p').removeClass().addClass('hidden');
$('#contact-p').removeClass().addClass('show');
$('#bb').addClass('expand');
}
});
function aboutvisible(){
if ($('#about-p').hasClass('about-vis') || $('#about-p').hasClass('show')) {
return true;
} else {
return false;
}
}
function contactvisible(){
if ($('#contact-p').hasClass('contact-vis') || $('#contact-p').hasClass('show')) {
return true;
} else {
return false;
}
}
正在添加/删除的类只是改变不透明度。它们还附加了 CSS3 转换。谁能帮我弄清楚为什么会发生这种情况？没有任何 CSS 涉及它。
这是 HTML:
<div class="bottom-border" id="bb">
<h1>Hi, my name is <span>Blank.</span></h1>
<div id="about-p" class="about-vis">
<p>Filler text here</p>
<p>more filler text</p>
</div>
<div id="contact-p" class="contact-vis">
<p>This is how you can contact me</p>
<div><i class="ss-icon">email</i><i class="ss-icon">dribbble</i><i class="ss-icon">twitter</i></div>
</div>
</div>
澄清一下，内容转换正常，但出于某种原因，它影响了包含 div (#bb) 的背景。
这里还有 CSS:
#about-p, #contact-p {
position: absolute;
width: 100%;
}
.about-hid, .contact-hid {
opacity: 0;
-webkit-transition: opacity .35s ease;
-moz-transition: opacity .35s ease;
-ms-transition: opacity .35s ease;
-o-transition: opacity .35s ease;
transition: opacity .35s ease;
}
.about-vis, .contact-vis {
opacity: 1;
-webkit-transition: opacity .35s ease;
-moz-transition: opacity .35s ease;
-ms-transition: opacity .35s ease;
-o-transition: opacity .35s ease;
transition: opacity .35s ease;
}
.hidden {
opacity: 0;
}
.show {
opacity: 1;
}
最佳答案
您的类(class)没有背景色，对吧。试试这个 CSS，
.class {
background-color: transparent !important;
}
关于iOS 中的 jquery 打开/关闭 div 背景(不应该)适用于所有桌面浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17181634/