cari

Rumah  >  Soal Jawab  >  teks badan

Tulis semula tajuk kepada: Cara menukar menu hover-expand kepada click-expand

Jadi pada asasnya saya mempunyai menu yang mengembang apabila anda menuding di atasnya. Bagaimanakah saya boleh menulis semula kod saya supaya ia juga berkembang pada klik (kembangkan pada klik, runtuh pada klik sekali lagi)? Anda boleh menggunakan JavaScript jika perlu, tetapi saya telah cuba melakukan segala-galanya dengan hanya HTML dan CSS. 

html, body {
    font-family: Arial, Helvetica, sans-serif;
}

.navigation {
  width: 300px;
}

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

.mainmenu a:hover {
    background-color: #C5C5C5;
}

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

.submenu a {
  background-color: #999;
}

.submenu a:hover {
  background-color: #666;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">产品</a>
      <ul class="submenu">
        <li><a href="">上装</a></li>
        <li><a href="">下装</a></li>
        <li><a href="">鞋类</a></li>
      </ul>
    </li>
        <li><a href="">其他</a>
      <ul class="submenu">
        <li><a href="">联系我们</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">常见问题</a></li>
      </ul>
    </li>
  </ul>
</nav>

P粉090087228P粉090087228356 hari yang lalu484

membalas semua(1)saya akan balas

  • P粉320361201

    P粉3203612012024-01-17 09:26:48

    Saya membaca butiran soalan anda dengan teliti

    Anda boleh cuba ikuti kod pembaikan berikut. 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        html, body {
        font-family: Arial, Helvetica, sans-serif;
    }

    .navigation {
    width: 300px;
    }

    .mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    .mainmenu a {
    display: block;
    background-color: #CCC;
    text-decoration: none;
    padding: 10px;
    color: #000;
    }

    .mainmenu a:hover {
        background-color: #C5C5C5;
    }

    .mainmenu li.active .submenu {
    display: block;
    max-height: 200px;
    }

    .submenu a {
    background-color: #999;
    }

    .submenu a:hover {
    background-color: #666;
    }

    .submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
    }
</style>
<body>
    <nav class="navigation">
        <ul class="mainmenu">
          <li><a href="javascript:;" onclick="showSubMenu(event)">产品</a>
            <ul class="submenu">
              <li><a href="">上装</a></li>
              <li><a href="">下装</a></li>
              <li><a href="">鞋类</a></li>
            </ul>
          </li>
              <li><a href="javascript:;" onclick="showSubMenu(event)">其他</a>
            <ul class="submenu">
              <li><a href="">联系我们</a></li>
              <li><a href="">关于我们</a></li>
              <li><a href="">常见问题解答</a></li>
            </ul>
          </li>
        </ul>
      </nav>
</body>
<script>
    function showSubMenu(e) {
        e.target.parentNode.classList.toggle('active');
    }
</script>
</html>

    balas
    0
  • Batalbalas