亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 jQuery 導航隱藏菜單

使用 jQuery 導航隱藏菜單

一只斗牛犬 2021-06-09 14:37:38
我用 jquery 構建了一個導航菜單,當我點擊菜單圖標時它會打開但是當我再次點擊菜單圖標時它不會關閉這是 html 代碼:<aside class="aside_menu">        <span class="arrow"></span>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div>        <div><a href="#">test</a></div></aside>這是 jquery 代碼:$(document).ready(function () {$(".aside_menu .arrow").click(function () {    var aside_menu = $(this).parent();    if (aside_menu.offset().right === 0)        aside_menu.animate({right: "-200px"})    else        aside_menu.animate({right: "0px"})})})菜單隱藏在頁面右側,只顯示菜單圖標
查看完整描述

2 回答

?
慕容森

TA貢獻1853條經驗 獲得超18個贊

簡單的事情在最大阻力線之后,與其說jQuery,不如用JS做這種簡單的事情。此外,JS 中的動畫很笨拙,尤其是在較弱的計算機和智能手機上,這會破壞用戶體驗。使用簡單的 JS 和 CSS 更容易做到??赡芪业拇a不會幫助你,但我希望能引導你走上正確的道路。附言。盡量不要在類和屬性和 id 中使用:“_”(下劃線),因為這是在 SEO 方面,它是對膝蓋的打擊,更好的選擇是:“-”(破折號)。


var menu = document.querySelector("#menu");

var button = document.querySelector("#button");


function toggleMenu(){

  if(!menu.classList.contains("fade")){

    menu.classList.add("fade");

  }else{

    menu.classList.remove("fade");

  }

}


button.addEventListener("click", toggleMenu);

body{

  margin: 0;

  display: flex;

  }

#menu{

  background: pink;

  width: 70px;

  height: 100%;

  text-align: center;

  transition: 0.34s;

  }

#button{

  height: 30px;

  transition: 0.34s;

  }

.fade{

  width: 0 !important;

  }

.fade *{

  display: none;

}

<aside id="menu" class="fade">

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

        <div><a href="#">test</a></div>

</aside>

<button id="button">

Button

</button>


查看完整回答
反對 回復 2021-06-11
  • 2 回答
  • 0 關注
  • 196 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號