0

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

这是我所拥有的：

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

谢谢

4

1 回答 1

0

我浏览了我的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;
        }
    }

谢谢您的帮助，

于 2013-10-10T22:40:47.203 回答