2013-10-10 4 views
0

У меня есть простое событие переключения, и все работает отлично на рабочем столе, но когда я иду на телефон, я должен дважды нажать, чтобы открыть его для переключения?Toggle Открыть Закрыть вам нужно дважды щелкнуть по телефону

Вот что у меня есть:

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

Благодаря

+0

Я не знаю, о чем вы говорите о, я просто перешел к вам с моей Galaxy-S4, используя Chrome-браузер, и он отлично работает. –

+0

На моем iphone он теперь работает. Не знаю, почему. – user2751645

+0

Теперь или нет? – musicnothing

ответ

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

Спасибо за помощь,

Смежные вопросы