iOS中的jquery打开/关闭div背景（不应该）适用于所有桌面浏览器[重复]

Posted 2023-03-06

【中文标题】iOS中的jquery打开/关闭div背景（不应该）适用于所有桌面浏览器[重复]

【英文标题】：jquery in iOS turning div background on/off (not supposed to) works on all desktop browsers [duplicate]

【发布时间】：2013-06-15 10:05:41

【问题描述】：

在我正在开发的网站上，我使用“.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;

【参考方案1】：

你的课程没有背景色，对吧。试试这个 CSS，

.class 
    background-color: transparent !important;

【讨论】：

我想我也应该添加 HTML，我会编辑。