Foundation 5.1 Off-canvas Не работает на Safari iOS (Simulator)

Код ниже прекрасно работает в браузере рабочего стола (Safari и Firefox), но кнопка меню не работает с Mobile Safari (когда я нажимаю ничего не происходит, и я был ожидая отображения меню).Foundation 5.1 Off-canvas Не работает на Safari iOS (Simulator)

У меня есть старый симулятор (iOS 5), но код примера Foundation работает со своей страницы в том же мобильном браузере, поэтому я не уверен, что я делаю неправильно. Например, расширенный раздел этой ссылки отлично работает в одном и том же мобильном браузере: http://foundation.zurb.com/docs/components/offcanvas.html, а мой код в значительной степени является их копией.

JS Fiddle ссылка здесь: http://jsfiddle.net/rGyKv/

Update: Изменено название кремовый холста, в отличие от Topbar.

<html lang="en" class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <meta content="width=device-width" name="viewport"> 

    <link href="/static/css/foundation.min.css" rel="stylesheet"> 

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="http://localhost:8080/static/js/foundation.min.js"></script> 

    <meta class="foundation-data-attribute-namespace"> 
    <meta class="foundation-mq-xxlarge"> 
    <meta class="foundation-mq-xlarge"> 
    <meta class="foundation-mq-large"> 
    <meta class="foundation-mq-medium"> 
    <meta class="foundation-mq-small"> 

    <script> $(document).ready(function() {$(document).foundation();});</script> 

    <meta class="foundation-mq-topbar"> 

</head> 

<body> 
<div class="row"> 
    <div class="small-12 columns end"> 
     <div class="off-canvas-wrap docs-wrap"> 
      <div class="inner-wrap"> 
       <nav class="tab-bar"> 
        <section class="left-small"> 
         <a class="left-off-canvas-toggle menu-icon"> 
              <span> </span> </a> 
        </section> 
        <section class="middle tab-bar-section"> 
         <h1 class="title">Title</h1> 
        </section> 
       </nav> 
       <aside class="left-off-canvas-menu"> 
        <ul class="off-canvas-list"> 
         <li> <label> Welcome </label> </li> 
         <li> <a href="#">Home</a> </li> 
         <li> <a href="#"> Logout </a> </li> 
        </ul> 
       </aside> 
       <section class="main-section"> 
        <div class="row"> 
         <div class="small-12 columns"> 
          <br> 
          <h4 class="">Header</h4> 
          <p> CONTENT GOES HERE</p> 
         </div> 
        </div> 
       </section> 
       <a class="exit-off-canvas"> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 



</body> 
</html>

источник

2014-02-09 Ecognium

Я имею ту же самую проблему. Вы нашли лучший подход к исправлению этого, а не добавили «фиктивный» прослушиватель в значок меню? Если я должен, я воспользуюсь этим исправлением, но если чувствую себя очень хаки ... –

Нет. Я использовал решение @ williem и не пытался найти другие способы сделать это. – Ecognium

Спасибо за ответ. Я прокомментировал тему на форумах Фонда, но еще ничего не слышал. Это просто кажется «грязным», чтобы добавить пустого слушателя ... –

я столкнулся с той же проблемой, и после некоторых поисков я нашел хак пользователя vietqhoang на Github.

Используя следующий код для инициализации фундамента, я как-то исправил кнопки без кнопок для iOS для меня.

$(document).ready(function() { 
    $(document).foundation(); 

    // Hack to get off-canvas .menu-icon to fire on iOS 
    $('.menu-icon').click(function(){ false }); 
});

источник

2014-02-09 14:58:29

Спасибо! Это работало очень хорошо. Обновленная скрипка для тех, кто интересуется: http://jsfiddle.net/S7a9t/ – Ecognium

Работал и для меня. Благодаря! – Anthony

Это, вероятно, спасло меня несколько часов разочарования :) Трансы! – Dreamdealer

Добавьте HREF к этой линии:

<a class="left-off-canvas-toggle" href="#" >

Это будет решать вопрос для IOS

источник

2014-04-14 18:45:06 Rafi

Это правильное решение. Принятый ответ устраняет проблему, делая тег «clickable», но реальной проблемой является отсутствующий атрибут. –

Это не только правильное решение, но и единственное решение, которое действительно работает. – Pieter

Реальное решение. Реальный ответ. Принятый ответ также работает, но это исправление обезьяны. –

Foundation 5.1 Off-canvas Не работает на Safari iOS (Simulator)

ответ

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