0

Есть блок с боковым меню. В нем есть блок со стрелкой, при нажатии на которую блок перемещается заданным позициям. На БОЛЬШОМ экране все работает нормально, но на МАЛЕНЬКОМ, при нажатии на блок со стрелкой первый раз ничего не происходит, а при повторных нажатиях начинает нормально работать. Не могу понять как устранить дабл клик, что все работало с первого нажатия.

const aside = document.querySelector('.aside');
const actionArrow = document.querySelector('.action-arrow');

let isOpen = false;
let rotation = 0;

const width = window.innerWidth;

if (width < 1080) {
  actionArrow.style.transform = `rotateY(180deg)`
  aside.style.left = "-336px";
} else {
  aside.style.left = "0";
}

actionArrow.addEventListener('click', () => {
  isOpen = !isOpen;
  rotation += 180;

  if (isOpen) {
    aside.style.left = "-336px";
    aside.style.transition = `left 0.5s ease-in-out`;
    actionArrow.style.transform = `rotateY(${rotation}deg)`
  } else {
    aside.style.left = "0";
    aside.style.transition = `left 0.5s ease-in-out`;
    actionArrow.style.transform = `rotateY(0)`
  }
});

window.addEventListener('resize', () => {
  const width = window.innerWidth;

  if (width < 1080) {
    aside.style.left = "-336px";
    actionArrow.style.transform = `rotateY(180deg)`
  } else {
    aside.style.left = "0";
    actionArrow.style.transform = `rotateY(0deg)`
  }
});
.aside {
  position: fixed;
  left: 0;
  width: 348px;
  height: 100dvh;
  color: #000000;
  background-color: #4a90d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  @media (max-width: 1080px) {
    left: -336px;
  }
}

.aside .wrapper {
  position: relative;
  width: 348px;
  height: 100dvh;
  box-sizing: border-box;
  padding: 0 16px;
}

.aside .wrapper .action-arrow {
  position: absolute;
  top: 50dvh;
  left: 339px;
  width: 12px;
  height: 22px;
  background-color: #4a90d9;
  border: solid 2px #eff2f7;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  z-index: 999;
}

.aside .wrapper .action-arrow span {
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="aside">
  <div class="wrapper">
    <div class="action-arrow">
      <span class="material-symbols-outlined">></span>
    </div>
  </div>
</div>

0

2 ответа 2

1

HTML + CSS

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

body {
  position: fixed;
  inset: 0;
}

aside.wrapper {
  position: absolute;
  inset: 0 auto 0 0;
  background-color: #4a90d9;
  display: flex;
  width: 0;
  min-width: 10px;
  max-width: 348px;
  transition: 0.8s;
}

aside.wrapper:has(input#toggle-wrapper:checked) {
  width: 100%;
}

label[for="toggle-wrapper"] {
  width: 15px;
  height: 30px;
  position: absolute;
  right: -10px;
  align-self: center;
  background-color: #4a90d9;
  border: 1px solid white;
  border-radius: 50vmax;
  display: grid;
  place-items: center;
}

label[for="toggle-wrapper"]::before {
  content: ">";
  transition: 0.8s;
}

aside.wrapper input#toggle-wrapper:checked+label[for="toggle-wrapper"]::before {
  transform: rotateY(180deg);
}
<body>
  <aside class="wrapper">
    <input id="toggle-wrapper" type="checkbox" hidden>
    <label for="toggle-wrapper"></label>
  </aside>
</body>

Работать будет на экранов любых размеров, а так же коротко и без усилий.

2
  • У :has все таки не такая и хорошая поддержка. Commented 14 янв. в 12:08
  • @OliverPatterson ну тогда именно часть этого клика можно реализовать через JS. Будет строк 5, не больше.
    – eccs0103
    Commented 14 янв. в 12:30
0
let isOpen = true;
    let rotation = 0;

    const width = window.innerWidth;
    if (width > 1080) {
        rotation=180;
        isOpen=false;
    }

    function move_block() {
        let actionArrow = document.getElementById('action_arrow');
        let aside = document.getElementById('aside');

        isOpen = !isOpen;
        if (rotation === 180) rotation=0;
        else rotation = 180

        if (isOpen) {
            aside.style.left = "-336px";
            aside.style.transition = `left 0.5s ease-in-out`;
            actionArrow.style.transform = `rotateY(${rotation}deg)`
        } else {
            aside.style.left = "0";
            aside.style.transition = `left 0.5s ease-in-out`;
            actionArrow.style.transform = `rotateY(${rotation}deg)`
        }
    }
@media screen and (max-width: 1080px) {
        #aside {
            left: -336px;
        }
    }
    @media screen and (min-width: 1080px) {
        #aside {
            left: 0;
        }
        #action_arrow {
            transform: rotateY(180deg);
        }
    }
    #aside {
        position: fixed;
        left: 0;
        width: 348px;
        height: 100dvh;
        color: #000000;
        background-color: #4a90d9;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 1080px) {
            left: -336px;
        }
    }

    #aside #wrapper {
        position: relative;
        width: 348px;
        height: 100dvh;
        box-sizing: border-box;
        padding: 0 16px;
    }

    #aside #wrapper #action_arrow {
        position: absolute;
        top: 50dvh;
        left: 339px;
        width: 12px;
        height: 22px;
        background-color: #4a90d9;
        border: solid 2px #eff2f7;
        outline: none;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        cursor: pointer;
        z-index: 999;
    }

    #aside #wrapper #action_arrow span {
        color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
<div id="aside">
    <div id="wrapper">
        <div id="action_arrow">
            <span onclick="move_block()" id="material-symbols-outlined">></span>
        </div>
    </div>
</div>
1
  • 1
    добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 14 янв. в 9:49

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.