Как исправить выпадающее меню выбора на мобильном телефоне

avatar
Julio Sandoval
9 августа 2021 в 04:26
248
2
-2

У меня есть следующий фрагмент кода. Столкнулся с проблемой на мобильном устройстве. Выпадающее меню вообще не работает. Я пробовал добавлять классы, пробовал @media query css для небольших устройств и ряд других вещей, которые не сработали. Я начинаю подозревать, что это может быть из-за множества слоев элементов div, которые у меня есть?

Когда я пытаюсь коснуться раскрывающегося меню на мобильном устройстве, параметры не отображаются. Такое ощущение, что выпадающее меню отключено или что-то в этом роде, но оно отлично работает на рабочем столе. Я пытаюсь найти решение, в котором реализована функция перетаскивания/сортировки.

 /** Add sortable/draggable function **/
        $('.column').sortable({
            connectWith: '.column',
            cursor: 'move',
            placeholder: 'placeholder',
            forcePlaceholderSize: true,
            opacity: 0.4,
            stop: function(event, ui)
            {
                /** Increment or decrement value based on element position **/
                $('.currentposition').each(function (i) {
                    let numbering = ++i + 4;
                    $(this).val(numbering);

                });

                /** Display ordering priority number **/
                $('.current_position').each(function (i) {
                    let numbering = ++i + 4;
                    $(this).text(numbering);

                });
            }
        }).disableSelection();
.column .dragbox{
        margin:5px 2px  20px;
        position: relative;
        border:1px solid #946553;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .column .dragbox{
        margin:0;
        /*font-size:12px;*/
        color:#fff;
        border-bottom:1px solid #946553;
        font-family:Verdana;
        cursor:move;
        padding:5px;
    }

    .dragbox-content{
        margin:5px;
        font-family:'Lucida Grande', Verdana;
        font-size:0.8em;
        line-height:1.5em;
    }
    .column .placeholder{
        background: #EED5B7;
        border:1px dashed #946553;
    }

    .opIcons
    {
        background-image: url('iconSpirite.gif')!important;
        background-repeat: no-repeat;
        float:right;
        height:13px;
        width:13px;
        margin:0px 2px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


<div id="column1" class="column ui-sortable">

<div class="dragbox" id="item5">

<div class="dragbox-content"></div>

<div class="setting">

<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Lastname:</label>
</div>

<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95009][value]" data-form-type="address,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>

<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95009][priority]" value="5">

<label class="current_position">5</label>
</div>
<div style="clear:both;">&nbsp;</div>

</div>

<div class="dragbox" id="item6">

<div class="dragbox-content"></div>

<div class="setting">

<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Zipcode:</label>
</div>

<div style="font-weight:bold; width: 33%; float: left;">

<select class="dropdown-toggle" style="width: 95%" name="Quote[95010][value]" data-form-type="address,country">

<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>

</select>
</div>
</div>

<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95010][priority]" value="6">

<label class="current_position">6</label>
</div>

<div style="clear:both;">&nbsp;</div>

</div>

<div class="dragbox" id="item7">

<div class="dragbox-content">

</div>

<div class="setting">

<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Phone:</label>
</div>

<div style="font-weight:bold; width: 33%; float: left;">

<select class="dropdown-toggle" style="width: 95%" name="Quote[95011][value]" data-form-type="phone,country">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>

<div style="font-weight:bold; width: 33%; float: left;"><input class="currentposition" type="hidden" size="1" name="Quote[95011][priority]" value="7">

<label class="current_position">7</label>
</div>

<div style="clear:both;">&nbsp;</div>

</div>

<div class="dragbox" id="item8">

<div class="dragbox-content"></div>

<div class="setting">
<div style="font-weight:bold; width: 33%; float: left;">
<label style="margin-left: 8px;" for="contact_information_requested-first_name_chatbot">Firstname:</label>

</div>

<div style="font-weight:bold; width: 33%; float: left;">
<select class="dropdown-toggle" style="width: 95%" name="Quote[95008][value]" data-dashlane-rid="dfa7f355a521619d" data-form-type="other">
<option value="0" selected="selected">Don't Ask This Question</option>
<option value="1">Request This From User</option>
<option value="2">Require User to Provide This</option>
</select>
</div>
</div>
<div style="font-weight:bold; width: 33%; float: left;">
<input class="currentposition" type="hidden" size="1" name="Quote[95008][priority]" value="8">

<label class="current_position">8</label>

</div>
<div style="clear:both;">&nbsp;</div>
</div>
</div>
Источник
Canned Man
9 августа 2021 в 09:57
0

Ваш вопрос сформулирован нечетко. Пожалуйста, отредактируйте свой вопрос, чтобы улучшить его читабельность.

Julio Sandoval
9 августа 2021 в 10:06
0

@CannedMan, когда я пытаюсь нажать / коснуться раскрывающегося меню на мобильном устройстве, параметры не отображаются, но это отлично работает на рабочем столе. И мне нужно сохранить реализованную функцию перетаскивания/сортировки.

Ответы (2)

avatar
Jaye Irons
11 августа 2021 в 19:24
-1

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

Я скопировал код из своей учетной записи Google Диска (после того, как я щелкнул вкладку меню, чтобы получить код javaS, перешел в редактор кода статьи, которая у меня там была.

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

Как и вы, я был расстроен, поэтому вернулся в режим редактора кода (HTML) и начал возиться с самим кодом. " в коде, который мог мешать работе самого кода.

И выяснилось, что ни то, ни другое!

Проблема, с которой я столкнулся, заключалась в "проблеме с размером дисплея", которая влияла на способность аудиопроигрывателя воспроизводить; Я уловил проблему и вернулся в свой HTML-редактор и просто "отрегулировал ширину и высоту" самого проигрывателя.

Аудиофайл (мне помог исправить трюк с регулировкой размера), который позволяет правильно отображать размер моего аудиоплеера

Аудиоплеер (отображается правильно и теперь воспроизводится после настройки размера пикселя — ширины и высоты)

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

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

Автопроигрыватель на моем сайте закодирован таким образом --

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

Надеюсь, это будет вам полезно! :D

avatar
Muhammad Ashraful Islam Shuvo
9 августа 2021 в 08:53
-1

Это из-за вашего Javascript. Пожалуйста, попробуйте добавить этот файл jquery:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Надеюсь, все работает нормально.

Canned Man
9 августа 2021 в 09:59
0

Спасибо за ваше решение. Чтобы сделать этот ответ полезным, объясните, что вы сделали.