Question

我有一个简单的切换事件，一切都在桌面上工作正常但是当我去手机时我必须点击两次才能让它切换到打开状态？

这就是我所拥有的：

$(".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/

的链接

由于

Answer 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;
        }
    }

感谢您的帮助，

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

1 个答案: