Javascript раскрывающееся меню в Touchvent (коснитесь) - PullRequest
Новая
       61

Javascript раскрывающееся меню в Touchvent (коснитесь)

0 голосов
/ 10 июля 2020

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

Пожалуйста, назовите меня лучшим способом достичь этого!

HTML

<ul class="mainnav">
  <li class="productstouch">
    <a href="#"><p>Products</p></a>

    <ul class="navlvl2">
      <li class="item">
        <a href="#"><p>Sensors</p></a>

        <ul class="navlvl3">
          <li>
            <a href="#"><p>Proximity Sesnors</p></a>
          </li>
          <li>
            <a href="#"><p>Magnetic Sensors</p></a>
          </li>
          <li>
            <a href="#"><p>Photoelectric Sensors</p></a>
          </li>
        </ul>
      </li>
      <li class="item">
        <a href="#"><p>Controllers</p></a>
      </li>
      <li class="item">
        <a href="#"><p>Motion Devices</p></a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><p>Home</p></a>
  </li>
  <li>
    <a href="#"><p>Manufacturers</p></a>
  </li>
</ul>

JS

function watchForHover() {
  let lastTouchTime = 0

  let it = document.getElementsByClassName("mainnav")
  let her = document.getElementsByClassName("navlvl2")
  let him = document.getElementsByClassName("navlvl3")

  function enableHover() {
    if (new Date() - lastTouchTime < 500) return

    for (let i = 0; i < it.length; i++) {
      it[i].classList.add("hasHover")
    }

    for (let c = 0; c < her.length; c++) {
      her[c].classList.add("hasHover")
    }

    for (let d = 0; d < him.length; d++) {
      him[d].classList.add("hasHover")
    }
  }

  function disableHover() {
    for (var i = 0; i < it.length; i++) {
      it[i].classList.remove("hasHover")
    }
    for (let c = 0; c < her.length; c++) {
      her[c].classList.remove("hasHover")
    }

    for (let d = 0; d < him.length; d++) {
      him[d].classList.remove("hasHover")
    }
  }

  function updateLastTouchTime() {
    lastTouchTime = new Date()
  }

  document.addEventListener("touchstart", updateLastTouchTime, true)
  document.addEventListener("touchstart", disableHover, true)
  document.addEventListener("mousemove", enableHover, true)

  enableHover()
}

watchForHover()

//--------------------End of Watch for Hover------------------------------//

function registerTouch() {
  let mobileLevelZeroItems = document.getElementsByClassName("mainnav")

  for (let i = 0; i < mobileLevelZeroItems.length; i++) {
    let Zerochild = mobileLevelZeroItems[i]

    //mobileLevelZeroItems.onclick = mobileLevelZeroItems.classList.add('onTouch')  ;

    Zerochild.addEventListener("touchstart", function () {
      mobileLevelZeroItems[i].classList.add("onTouch")
    })

    Zerochild.addEventListener("touchend", function () {
      mobileLevelZeroItems[i].classList.remove("onTouch")
    })
  }
}

registerTouch()

CSS

.mainnav {
  display: block;
  list-style: none;
  text-align: center;
  width: 100vw;
  margin: 0;
  padding: 0;
}

.mainnav > li {
  background-color: #1a6baa;
}

.mainnav > li > a {
  text-decoration: none;
  color: white;
}

.navlvl3 {
  display: none;
}

.mainnav > li > ul {
  display: none;
}

.mainnav.onTouch > li > ul {
  display: grid;
}

/*----------------------Beginning of .hasHover classes-------------------------------*/

.mainnav.hasHover {
  display: flex;
  list-style: none;
  background-color: lightblue;
  margin: 0;
  padding: 0;
  position: relative;
}

.mainnav.hasHover > li {
  background-color: lightblue;
  padding: 10px 30px 10px 30px;
  margin: 0;
}

.mainnav.hasHover > li > a > p:hover {
  color: green;
}

.mainnav.hasHover > li > a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: black;
}

.mainnav.hasHover > li:hover .navlvl2.hasHover {
  visibility: visible;
  display: block;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}

.mainnav.hasHover > li > a > p {
  margin: 0;
  font-size: 20px;
}

.navlvl2.hasHover {
  visibility: hidden;
  display: flex;
  position: absolute;
  background-color: lightgray;
  margin: 0;
}

.navlvl2.hasHover > li {
  margin: 0;
  padding: 15px;
  list-style: none;
}

.mainnav.hasHover > li:hover {
  background-color: pink;
}

.navlvl2.hasHover > li > a > p {
  margin: 0;
  padding: 0;
}

.navlvl2.hasHover > li:hover {
  background-color: lightgreen;
  color: white;
}

.navlvl3.hasHover {
  display: none;
  position: absolute;
  background-color: teal;
}

.navlvl3.hasHover > li {
  list-style: none;
}

.navlvl2.hasHover > li:hover .navlvl3.hasHover {
  display: block;
  top: 0;
  left: 100%;
}

1 Ответ

0 голосов
/ 10 июля 2020

Я думаю, вы слишком усложняете. Вы должны использовать события касания для таких вещей, как «смахивание», «перетаскивание» и т. Д. c. на устройствах с сенсорным экраном. Простые вещи, такие как «тап», уже сделаны за вас. Например, вы можете использовать скрытие раскрывающегося меню в CSS

.dropdown {
   display: none;
}

, и когда пользователь нажимает на элемент меню, просто показывать это раскрывающееся меню 

menuItem.addEventListener("click", function(){
   dropdown.style.display = "block";
})

Очевидно, это может быть доработан за счет добавления «переходов» и дополнительных стилей. Но это общая идея. Такие события, как 'click', 'onmousedown' и т. Д. c. работать на устройствах с сенсорным экраном.

...