Как я могу использовать наведение и щелчок в зависимости от различных устройств?

У меня есть кнопка Меню, которая наполовину видна и наполовину за пределами экрана. Кнопка full видна только тогда, когда она «зависла» (я написал CSS для этого, кнопка перемещается по горизонтали, поэтому она отображается полностью). Теперь это работает на настольном веб-сайте. Но, как вы знаете, hover не доступен на мобильных сайтах, поэтому hover преобразуется в click. Щелчок делает кнопку полностью видимой, но она не скрывается при повторном щелчке, потому что мы не определили событие щелчка, чтобы отобразить и скрыть его, потому что он не будет мешать наведению.

Так есть ли какой-либо короткий и эффективный способ сделать это, так что hover работает на рабочем столе и нажмите works on phone для той же функции (display and hide)?

Вы можете использовать CSS или jQuery или оба.

2 ответа

  1. его просто попробовать это

    1-отключить наведение на мобильное устройство с помощью запроса мультимедиа

    @media screen and (max-width:767px){

    кнопка: hover{ just disable css u r using }
    }

    2-добавить этот jquery-этот код добавления и удаления класса на кнопку нажмите

    $(‘button’).нажмите (функция(){
    $(этот.)toggleClass (‘btnClick’);

    });

    3: теперь напишите тот же CSS наведения для этого класса

    .btnClick{

    }

  2. Для вашего случая я предлагаю вам установить a hover functionв пределах точки останова, которая подходит для настольных компьютеров, и a click functionв пределах точки останова, которая подходит для мобильных устройств. См. мой пример ниже и отрегулируйте по мере необходимости.

    $(document).ready(function() {
    
    // When document is ready check window width, then choose hover/click
      if ($(window).width() > 768) {
          $("div").hover(function() {
          $(this).toggleClass("increase");
    
        });
    
      } else {
    
        $("div").click(function() {
          $(this).toggleClass("increase");
    
        });
      }
    });
    div {
      width: 50px;
      height: 15px;
      line-height: 45px;
      margin: 0 auto;
      background: red;
      color: white;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      overflow: hidden;
      transition: all 1s;
    }
    
    div.increase {
      width: 150px;
      height: 45px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div> I am the Button</div>

    Примечание: в моем примере; hoverпереключает высоту / ширину, когда ширина устройства шире 768px, в то время как A clickпереключает высоту / ширину, когда ширина устройства меньше 768px