suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Schreiben Sie den Titel um in: So ändern Sie das Hover-Expand-Menü in Click-Expand

Im Grunde habe ich also ein Menü, das sich erweitert, wenn man mit der Maus darüber fährt. Wie kann ich meinen Code so umschreiben, dass er auch beim Klicken erweitert wird (bei Klick erweitern, bei Klick wieder reduzieren)? Sie können bei Bedarf JavaScript verwenden, aber ich habe versucht, alles nur mit HTML und CSS zu erledigen. 

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 Tage vor493

Antworte allen(1)Ich werde antworten

  • P粉320361201

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

    我仔细阅读了你的问题详情

    你可以尝试按照以下修复代码。

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

    Antwort
    0
  • StornierenAntwort