Блог

Главная - Вопросы по программированию - Почему выпадающее меню не появляется на мобильном телефоне и быстро исчезает, когда вы нажимаете на него? Он работает только со вспышкой؟

Почему выпадающее меню не появляется на мобильном телефоне и быстро исчезает, когда вы нажимаете на него? Он работает только со вспышкой؟

#html #css

Вопрос:

запустите html***********

     <a href="">ابحث في الموقع</a>
        <ul class="submenu">
        <li><a href="">الرئيسيه</a></li>
        <li><a href="">تواصل معنا </a></li>    
        <li><a href="">المدونه </a></li>    
        </ul>
    </li>
</ul>

начать *******************css

  ul{margin: 0;
 padding: 0;
 list-style: none;}

 a{text-decoration: none;}
 .navigation{width:300px;
 margin: 20px auto;}

 .menu{position: relative;}
 .submenu{position: absolute;
  width: 200px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  padding: 5px;
  display: none;}

**************при наведении курсора на мобильном устройстве появляется только вспышка и снова исчезает

  .menu:hover .submenu{display: block;}

Комментарии:

1. На мобильных телефонах нет наведения курсора

Ответ №1:

Потому что вы используете :наведите курсор, он снова исчезнет. Чтобы переключить подменю, вы можете использовать javascript для изменения класса.

Поэтому добавьте onclick="myFunction()" к элементу, который вы хотите щелкнуть, и добавьте идентификатор к элементу, который вы хотите переключить, класс: <ul id="submenu"> .

Затем ваша функция (под другими элементами, чтобы убедиться, что они загружены до сценария):

 <script>
    function myFunction() {
        var element = document.getElementById("submenu");
        element.classList.toggle("mystyle");
    }
</script>

Посмотрите здесь на пример.

Метки: ,