recherche

Maison  >  Questions et réponses  >  le corps du texte

Réécrivez le titre comme suit : Comment changer le menu survolé-développé en clic-développé

Donc, en gros, j'ai un menu qui s'agrandit lorsque vous le survolez. Comment puis-je réécrire mon code pour qu'il se développe également au clic (développer au clic, réduire à nouveau au clic) ? Vous pouvez utiliser JavaScript si nécessaire, mais j'ai essayé de tout faire uniquement avec HTML et 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粉090087228372 Il y a quelques jours492

répondre à tous(1)je répondrai

  • P粉320361201

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

    J'ai lu attentivement les détails de votre question

    Vous pouvez essayer de suivre le code de réparation suivant. 

    <!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>

    répondre
    0
  • Annulerrépondre