Question

我是编程新手，所以请原谅我，如果问题有点基础。

我正在制作一个Web应用程序。我浏览codepen以获得满足我需求的菜单栏。并提出一个很好的：https://codepen.io/vichid/pen/cHnmK

问题是，子菜单在悬停时会展开。

虽然我想要的是，只有当我点击链接菜单时，子菜单才会展开。

这是html代码：

    <ul class="menu">
        <li>
            <a href="home.aspx">Beranda</a>
        </li>
        <li>
            <a href="#">Tabel</a>
            <ul class="sub-menu">
                <li><a href="MasterDepartemen.aspx">Departemen</a></li>
                <li><a href="MasterCabang.aspx">Cabang</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Pegawai</a>
            <ul class="sub-menu">
                <li><a href="MasterPegawai.aspx">Data Induk Pegawai</a></li>
                <li><a href="LaporanPegawai.aspx">Laporan Pegawai</a></li>
                <li><a href="MasterSlipGaji.aspx">Slip Gaji</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Pajak</a>
            <ul class="sub-menu">
                <li><a href="#">Parameter Pajak</a></li>
                <li><a href="#">Kalkulator Pajak</a></li>
                <li><a href="#">Perhitungan Manual</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Sistem</a>
            <ul class="sub-menu">
                <li><a href="MasterUser.aspx">Pengguna</a></li>
                <li><a href="#">Perusahaan</a></li>
            </ul>
        </li>
        <li>
            <a href="LogOut.aspx">Logout</a>
        </li>
    </ul>

这是CSS：

       <style class="cp-pen-styles">
       nav {
       /*
       position: absolute;
       top: 50%;
       left: 0;
       bottom: 50%;
       right: 0;
       */
       }

       ul.menu {
       width: 100%;
       height: 40px;
       line-height: 40px;
       position: relative;
       text-align: center;
       margin: auto;
       padding: auto;
       background-color: #DCE6F2;
       -moz-border-radius-topleft: 4px;
       -webkit-border-top-left-radius: 4px;
       border-top-left-radius: 4px;
       -moz-border-radius-topright: 4px;
       -webkit-border-top-right-radius: 4px;
       border-top-right-radius: 4px;
       }
       ul.menu li {
       float: left;
       width: auto;
       }
       ul.menu li a {
       display: block;
       width: auto;
       text-decoration: none;
       }
       ul.menu li:hover {
       background-color: #95B3D7;
       -moz-transition-property: background-color;
       -o-transition-property: background-color;
       -webkit-transition-property: background-color;
       transition-property: background-color;
       -moz-transition-duration: 0.33s;
       -o-transition-duration: 0.33s;
       -webkit-transition-duration: 0.33s;
       transition-duration: 0.33s;
       -moz-border-radius-topleft: 4px;
       -webkit-border-top-left-radius: 4px;
       border-top-left-radius: 4px;
       -moz-border-radius-topright: 4px;
       -webkit-border-top-right-radius: 4px;
       border-top-right-radius: 4px;
       }
       ul.menu li:hover ul {
       width: 100%;
       background: #95B3D7;
       visibility: visible;
       filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
       opacity: 1;
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
       -webkit-transition-property: opacity;
       transition-property: opacity;
       -moz-transition-duration: 0.33s;
       -o-transition-duration: 0.33s;
       -webkit-transition-duration: 0.33s;
       transition-duration: 0.33s;
      -moz-border-radius-bottomleft: 4px;
      -webkit-border-bottom-left-radius: 4px;
      border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
      }

      ul.sub-menu {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      visibility: hidden;
      display: block;
      position: absolute;
      left: 0;
      height: 40px;
      line-height: 40px;
      background-color: #95B3D7;
      }
      ul.sub-menu li:hover {
      -moz-border-radius-bottomleft: 4px;
      -webkit-border-bottom-left-radius: 4px;
      border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
      }

      ul.menu a,
      ul.sub-menu a {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #0E0500;
      padding: 0 10px;
      }
      </style>

上面的代码使菜单栏在悬停时展开其子菜单，而我想要的是onclick（只是onclick，而不是onhover和onclick人......）

有什么想法吗？

任何帮助将不胜感激.....谢谢.....

Answer 1

通过利用:focus a兄弟的sub-menu属性，我们可以使用li:hover而不是父sub-menu来显示/隐藏a

原则上，可以关注具有已定义href属性的a标记（如果您未使用tabindex="-1"，则可以将focus添加到元素以使其可聚焦）。如果您想了解有关tabindex和ul.sub-menu的更多信息，请查看this answer。

由于这是a:focus + ul.sub-menu的直接兄弟，我们可以选择＆＃34;它使用+兄弟选择器，如：ul.menu{ width: $menuWidth; height: 40px; line-height: 40px; position: relative; text-align: center; margin: auto; padding: auto; background-color:$menuColor; @include border-top-radius($borderRadius); li{ float: left; width: auto; a{ display: block; width: auto; text-decoration: none; } a:hover, a:focus { background-color:$subMenuColor; @include transition-property(background-color); @include transition-duration($duration); @include border-top-radius($borderRadius); } a:focus + ul, a + ul:hover{ width: $menuWidth; background: $subMenuColor; visibility: visible; @include opacity(1); @include transition-property(opacity); @include transition-duration($duration); @include border-bottom-radius($borderRadius); } } }，并应用适当的样式来显示子菜单。

<强> SCSS

while

<强> CODEPEN

Answer 2

您只需使用jQuery，HTML和CSS即可。

<!DOCTYP html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function() {
$(".list-p").click(function() {
var data = $(this).attr("data");
$(".list-s").hide();
$(".list-s-"+data+"").toggle();
});
});
</script>
</head>
<body>
<style>
body,html {margin:0;}
.menu {background:#555; height:40px;}
.menu ul,ol,dl {list-style:none; margin:0; padding:0;}
.menu li {float:left; margin:0 20px 0 0; padding:10px; border-right:1px #000 solid; position:relative;}
.menu li:last-child {margin-right:0; border-right:0;}
.menu span {color:#fff; text-decoration:none;}
.list-s {position:absolute; background:#555; left:0; width:150px; top:42px; display:none;}
.list-s ol{padding:10px; border-bottom:1px #000 solid;}
a {color:#fff;}
</style>
<div id="menu">
<div class="menu">
<ul>
<li><span class="list-p" data="1">list-p-1</span>
<dl class="list-s-1 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
<li><span class="list-p" data="2">list-p-2</span>
<dl class="list-s-2 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
<li><span class="list-p" data="3">list-p-3</span>
<dl class="list-s-3 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
<li><span class="list-p" data="4">list-p-4</span>
<dl class="list-s-4 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
</ul>
</div>
</div>
</body>
</html>

如何在点击而不是悬停时使导航栏扩展？

2 个答案: