Twitter bootstrap 2 раскрывающийся список верхней навигации с неработающим на мобильном устройстве

Я много искал о проблеме, прежде чем публиковать здесь, не нашел никакого решения.

Ссылка на сайт: http://bit.ly/1geHJr0

Я использую Twitter bootstrap 2.3.2 и включил форму в раскрывающееся меню. Все нормально работает в десктопных браузерах. В мобильном браузере, когда я нажимаю ссылку для входа в навигацию, открывается форма входа, но она закрывается, когда я нажимаю любое поле или кнопку в окне, пользователь не может вводить какую-либо информацию, поскольку она закрывается.

Вот моя часть кода для меню навигации

<li class="dropdown" id="menuLogin"> <a class="dropdown-toggle btn" href="login" data-toggle="dropdown" id="navLogin"><i class="icon-lock"></i> Login</a>
    <div class="dropdown-menu span3" style="background:#0C0;">
        <form method="post" action="<?php echo base_url().'login';?>" id="login">
            <div class="control-group">
                <input type="text" name="login_email" id="login_email" value="" placeholder="Email" class="span3" />  <?php echo form_error('login_email')?>
            </div>
            <div class="control-group">
                <input type="password" name="login_password" id="login_password" value="" placeholder="password" class="span3"/>  <?php echo form_error('login_password')?>
            </div>
            <div class="control-group">
                <div class="text-left" style="padding-left:8px;">
                    <input type="submit" class="btn" name="login" value="Login" style="background-color: #3498DB;" />
                    <a href="<?php echo base_url().'forgot_password';?>">Forgot Password?</a>
                </div>
            </div>
        </form>
    </div>
</li>

Я пробовал код ниже, но не повезло

<script>
    $('.dropdown-menu input, .dropdown-menu button').on('click', function(e) {
        e.stopPropagation();
    });
</script>

Спасибо


mobile menu html twitter-bootstrap twitter-bootstrap-2
person Praveen Govind    schedule 14.02.2014    source источник
comment
какой браузер и какая версия??? у меня работает в firefox   -  person Aamir Shahzad    schedule 17.02.2014
comment
@AamirShahzad Chrome для мобильных устройств. Он отлично работает в Firefox и Chrome на рабочем столе. Мобильная версия Chrome: 32.0.1700.99.   -  person Praveen Govind    schedule 17.02.2014
comment
можете ли вы попробовать использовать event.stopImmediatePropagation api.jquery.com/event.stopImmediatePropagation? или event.preventDefault()?   -  person Ravimallya    schedule 17.02.2014
comment
Я только что попробовал это на Mobile Chrome V 32.0.1700.99 на Samsung Galaxy S4, и это сработало. Возможно, его можно было бы выделить для определенного диапазона мобильных устройств? Я чувствую вашу боль в этом :( У меня когда-то была похожая проблема: пользователь нажимает на поле, и форма отображается и снова закрывается. Это было потому, что элемент зависал над полем. Может быть, это может быть что-то подобное в вашем случае с размером экрана ?   -  person Clarice Bouwer    schedule 18.02.2014
comment
@Ravimallya, да, это тоже пробовал, нет, не помогло ;(   -  person Praveen Govind    schedule 18.02.2014
comment
@kleinkie Да, это не работает на некоторых устройствах и настольных версиях Chrome. Это проводная проблема, многие пользователи начальной загрузки сталкиваются с той же проблемой.   -  person Praveen Govind    schedule 18.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

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

Проблема заключалась в том, что я использовал div вместо ul для раскрывающегося списка. Он закрывается, когда вы нажимаете кроме ul.

я просто заменил это

  <div class="dropdown-menu span3" style="background:#0C0;">

С ul > li

 <ul class="dropdown-menu span3" style="background:#0C0;">
   <li>
    <form....
   </li>
</ul>
person Praveen Govind    schedule 18.02.2014