切换打开关闭必须在手机上单击两次

Posted 2023-03-15

【中文标题】切换打开关闭必须在手机上单击两次

【英文标题】：Toggle Open Close have to click twice on phone

【发布时间】：2013-10-10 21:33:17

【问题描述】：

我有一个简单的切换事件，在桌面上一切正常，但是当我去电话时，我必须点击两次才能让它打开？

这是我所拥有的：

$(".service-m").click(function () 
    $(this).next(".serviceinfo-m").toggle()
); 

<a class="service-m">           
Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The First Line of Text.</div>
<a class="service-m">           
    Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The First Line of Text.</div>
<a class="service-m">           
    Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The Second Line of Text.</div>
<a class="service-m">           
    Some Text
</a>

<div class="serviceinfo-m" style="display:none;">The Third Line of Text.</div>

这里还有一个链接到 jsfiddle http://jsfiddle.net/BrentRansom/tfM6E/1/

谢谢

【问题讨论】：

我不知道你在说什么，我只是导航到你在用 Chrome 浏览器摆弄我的 Galaxy-S4，它工作正常。

在我的 iPhone 上它现在可以工作了。不知道为什么。

现在做还是不做？

是的，它现在可以工作了，不确定发生了什么我正在开发的网站中使用相同的脚本，我必须单击两次才能打开切换开关。我要去第 10 次看一下，看看我能不能罚款。如果不能，我会发布上面的代码。感谢您的帮助，这为我节省了很多时间。

【参考方案1】：

我检查了我的 css，发现我的 css 有冲突。 这是我使用较少的内容：

.service-m 
        margin:0;
        padding:5px 10px;
        position: relative;
        height:70px;
        display: block;
        font-family: @m;
        font-size: 18px;
        color: @light-gray;
        border-top:2px dotted @light-gray;
        .ico-nonhover 
            visibility: visible;
            position: absolute;

            top:10px;
            left:10px;
            width:60px;
        
        .ico-hover 
            visibility: hidden;
        
        h2 
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        
    
    .service-m:hover 

        .ico-nonhover 
            visibility: hidden;
        
        .ico-hover 
            visibility: visible;
            position: absolute;

            top:10px;
            left:10px;
            width:60px;
        
        h2 
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        
    

这是我使用较少的修复它：

.service-m 
        margin:0;
        padding:5px 10px;
        position: relative;
        height:70px;
        display: block;
        font-family: @m;
        font-size: 18px;
        color: @light-gray;
        border-top:2px dotted @light-gray;
        .ico-nonhover 
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
            z-index:1;
        
        .ico-hover 
            z-index: 0;
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
        
        h2 
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        
    
    .service-m:hover 

        .ico-nonhover 
            z-index:0;
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
        
        .ico-hover 
            z-index:1;
            position: absolute;
            top:10px;
            left:10px;
            width:60px;
        
        h2 
            float:left;
            position: relative;
            top:26px;
            left:70px;
            margin:0;
            padding:0;
        
    

谢谢你的帮助，