1. дома
  2. Вопрос и ответ
  3. Bootstrap v2 Dropdown Навигация, не работающий на мобильных браузерах

Bootstrap v2 Dropdown Навигация, не работающий на мобильных браузерах

2013-06-18 1 views
29

У меня проблема с раскрывающимися меню меню Bootstrap на мобильных устройствах (Bootstrap 2). Аналогичный вопрос был задан here с раскрывающимися кнопками, однако ответ на это был присущей ошибкой в ​​бутстрапе, который был решен в обновлении. Кажется, у меня такая же проблема, поэтому, возможно, до моей разметки?Bootstrap v2 Dropdown Навигация, не работающий на мобильных браузерах

У меня есть сворачиваемый навигатор с выпадающими списками, и все отлично работает на настольных браузерах. Однако на мобильном устройстве выпадающие окна откроются, когда вы нажмете на раскрывающийся список, но нажав на ссылки для выпадающего списка, вы просто сбросите выпадающий список снова - ссылки не могут быть достигнуты. Я пробовал различные версии бутстрапа и не могу исправить это, поэтому могу только представить себе, что это моя разметка. Вот оно:

<header class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a href="#"><h1>Branding</h1></a> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"> 
        <li><a href="#">Menu Item 1</a></li> 
        <li class="dropdown">      
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>  
         <ul class="dropdown-menu"> 
          <li><a href="#">Dropdown Item 1</a></li> 
          <li><a href="#">Dropdown Item 2</a></li> 
          <li><a href="#">Dropdown Item 3</a></li> 
          <li><a href="#">Dropdown Item 4</a></li>       
         </ul> 
        </li> 
        <li><a href="#">Menu Item 3</a></li> 
        <li><a href="#">Menu Item 4</a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
    </div> 
</header>

Вот пример тиражирования кода (извините, не может отправить на сайт): http://jsfiddle.net/yDjw8/1/

(Проблему можно увидеть только/реплицируются на мобильном телефоне - я использую IOS)

Любая помощь будет высоко оценена.

источник

2013-06-18 Stuart

+1

Вам может понадобиться, чтобы найти другой CDN, чтобы связать в вашем Fiddle. Когда я нахожусь, файлы CSS и JS загружаются неправильно. Я попытался создать свой собственный скрипт, используя тот же CDN, и ссылки на файлы CSS и JS сломались после перезагрузки Fiddle. –

+1

Спасибо за это @MichaelFreake - я изменил хостинг на Dropbox - лучше? – Stuart

+1

Я могу подтвердить, что он теперь работает в Chrome на моей машине Win7. Скрипка также отображается точно так же на моем iPhone 5 iOS 6.1.3, используя как Chrome, так и Safari. Я вижу поведение, о котором вы описали. Нажмите на ссылку меню - это подчеркивается. Нажмите на ссылку подменю - она ​​разрушает меню. –

ответ

58

В вашем уменьшенном bootstrap.min.js файле, найти подстроку

"ontouchstart"

и заменить его

"disable-ontouchstart"

проверить этот вопрос похожа SO: Bootstrap Collapsed Menu Links Not Working on Mobile Devices

источник

2013-07-24 18:11:52 Jollyra

+0

Большое спасибо! – Stuart

+0

Это сработало и для меня. Спасибо! –

+0

Спасибо, это отлично работает после нескольких часов серфинга в сети T_T, спасибо! –

1

Похоже, что все работает со мной, возможно, попробуйте заменить ваши загрузочные файлы свежей копией, если вы случайно что-то испортили. Если это не работает, убедитесь, что вы импортируете все. Вы уверены, что импортируете все файлы CSS и JS?

источник

2013-06-18 21:50:53

+1

К сожалению, я попробовал повторное добавление Bootstrap примерно 5 раз. Все там все в порядке. Я действительно застрял в этом - странное поведение без причины. Как я уже говорил, все работает отлично на рабочем столе, но, очевидно, это не то, где он будет использоваться :) – Stuart

1

Когда вы нажимаете на раскрывающееся меню, он добавляет класс open к вашему <li class="dropdown">, давая вам: <li class="dropdown open">. Когда вы нажимаете ссылку в выпадающем меню или «Пункт меню 2 (выпадающее меню)», класс open удален, заставляя dropmenu снова складываться.

Нижеприведенная скрипка показывает, как остановить событие click от распространения, но может вызывать проблемы где-то еще. Кроме того, я запретил распространение в позиции №1 в раскрывающемся списке. Вы можете использовать jQuery, чтобы это произошло во всех элементах раскрывающегося списка.

JS Fiddle: http://jsfiddle.net/yDjw8/2/

источник

2013-06-19 20:17:24

12

Нашли это исправление для версии 2.3.2:

<script> 
jQuery(document).ready(function($) { 
$("li.dropdown a").click(function(e){ 
    $(this).next('ul.dropdown-menu').css("display", "block"); 
    e.stopPropagation(); 
    }); 
}); </script>

Работал на двух отдельных навигационных системах, которые я построил.

источник

2013-08-07 15:10:36 asbanks

+1

Спасибо за этот ответ. Это заставило ссылки работать, но выпадающее меню снова не рушится на тестируемой версии. В любом случае, я бы поставил его как принятый ответ, но @Jollyra попал туда первым! – Stuart

+1

спасибо за решение. однако есть две проблемы: 1. выпадающие меню не закрывают другие открытые выпадающие списки при их открытии; и 2. ссылки внутри выпадающих списков не распространяются на их JS. опубликование исправления: http://stackoverflow.com/a/25041753/437019 –

4

Я решил эту же проблему, делая это:

1.Open ваш js/bootstrap-dropdown.js или уменьшенная версия этого.

2.Find для линий или мест: touchstart.dropdown.data-api

3.there должен быть только 4 происходит от него.Что-то вроде этого:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) 
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) 
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) 
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

Вы должны вставить эту новую линию между 2-й и 3-й вхождений:

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

4.Your новостей кусок кода должно быть что-то вроде этого:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) 
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) 
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() }) 
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) 
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

Будьте осторожны с минитипированными версиями Bootstrap.js ... так что вы должны конкатенировать новую строку в точном положении на ней.

Удачи вам! :)

источник

2014-01-08 14:05:37 Massa

+1

лучшее решение, отлично работающее для меня для старых версий BS. Благодаря! – Aslam

10

Я использую BootStrap 3.1.1. Я пробовал много ответов, выпадающее меню отлично работает на устройствах Android, но все еще не работает на устройстве iOS. Наконец, я нахожу основную причину проблемы.

сафари на iPhone поддерживает только для <a> и <input> элемента нажмите событие. См. Этот отрывок Click event delegation on the iPhone.

Таким образом, нам нужно добавить пользовательскую делегацию. Следующий код решит проблему.

$('[data-toggle=dropdown]').each(function() { 
this.addEventListener('click', function() {}, false); 
});

источник

2014-03-11 06:52:24 icemelon

+0

Это. Большое вам спасибо. –

+0

это решило проблему для меня тоже, спасибо большое! –

3

Я рекомендую загрузки последних Bootstrap файлов и замена bootstrap.js и bootstrap.min.js на вашем сервере с новыми версиями.

Это исправило проблему для меня.

источник

2014-03-28 16:14:10

+0

Этот вопрос довольно старый, однако на момент написания, я уже пробовал это разное время. – Stuart

1

Это исправление предназначено для Bootstrap 2.3.2, и оно основано на ответе @asbanks (https://stackoverflow.com/a/18107103/437019).

В ответ на ответ Асбанкса этот сценарий также распространяет вызовы JS из ссылок внутри выпадающих списков, а открытое раскрывающееся меню закрывает другие открытые.

$(function() { 
    return $("a.dropdown-toggle:not(.multiselect)").click(function(e) { 
    $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none"); 
    $(this).next("ul.dropdown-menu").css("display", "block"); 
    return e.stopPropagation(); 
    }); 
}); 

$(document).on('click click.dropdown.data-api', function(e) { 
    if (!$(e.target).closest('.dropdown, .multiselect-container').length) { 
    return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none"); 
    } 
});

источник

2014-07-30 16:10:15

+0

Этот код, как есть, исправил мою проблему даже на Bootstrap 3.3.7 – CopyJosh

1

Я использую bootstrap-3.3.1, и я испытываю такую ​​же проблему в приложении Android phonegap.

Я нашел обходной путь смешной после нескольких проб и ошибок:

// clueless hack here!!!! otherwise dropdown menu doesn't work 
$('.dropdown-toggle').dropdown('toggle'); 
$('.dropdown-toggle').dropdown('toggle');

источник

2015-01-03 23:42:22

+0

Да, это работает для меня. Я не знаю, почему это было сказано дважды, и это работает. – Raza

+0

ОК, это работает ... но это действительно относится к «почему это ЭТО работает». – Abela

0

Jquery-1.11.2, самозагрузки-3.3.2:

$('#yourId').on('hidden.bs.dropdown', function(){ 
    $(this).click(function (event) { 
     $('.dropdown-toggle').dropdown('toggle'); 
    }); 
});

источник

2015-02-15 20:48:39 Ferry

+0

Было бы полезно, если бы вы уточнили причину проблемы и почему ваше решение работает. –

+0

работает на меня, потому что я использую dropdown.js из начальной загрузки. и такая же ошибка. – Ferry

+0

Мой комментарий действительно о предоставлении информации в вашем ответе, а не просто предоставлении фрагмента кода. Обычно полезно объяснять, а не просто «здесь, это работает». –

4

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

$ («тело»). На («touchstart.dropdown», «.dropdown меню», функция (е) {е .stopPropagation();});

Его работа для меня !!!

источник

2015-07-10 08:08:44

0

Я считаю, если вы сделаете следующее, ссылки будут работать должным образом

$(document).ready(function(){ 
      $('.youClass').click(function(){ 
       var menuItem = '<a class=" " href=" ">Log Out</a>'; 

       $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>'); 

      }); 
     });

источник

2016-03-08 04:55:59

2

Это похоже на работу без каких-либо проблем.Класс «open» уже существует с загрузкой и должен работать, но по какой-то причине это не так. Этот код заставляет его работать соответственно. :)

jQuery(document).ready(function($) { 
    $("li.dropdown").click(function(e){ 
     $(this).toggleClass("open"); 
     }); 
    });

источник

2016-04-20 18:01:10 Kathryn

0

добавления role="button" к <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> работал для меня

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>

источник

2017-01-19 06:36:18

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

  • Нет связанных вопросов^_^