Question

我差不多为我的朋友制作了一个网站：www.soundpie.org 但是他现在想要更改从导航菜单中下拉的部分。他想让这些部分在点击时保持打开，而不是悬停。我相信解决方案在于将Jquery添加到网站。我已尝试过这篇文章（请参阅下面的链接），但似乎无法配置jquery

Changing hover to click on menu

任何建议都将不胜感激。

这是当前的html：

<body>

<span id="dummy"></span>

<div id="topnav" class="tnav">

 <ul class="tnav-lvl1-menu-tbar">
      <div class="tnav-lvl1-menu-body tnav-bg4">

<div id="logo1">
      <li class="tnav-style-1">
            <div class="grow img"> <a href="javascript:void(0);"><img src="images/icons/ai1.png" alt="flute"><span>HEAR</span></a></div>

<div class="tnav-play animated fadeInDown">

           <div id="services" class="lightstyle">
                <div class="mustard-bg">

                     <div class="tnav-showbox">                              

                         <div id="hear-content">

                         <h2>Hear:</h2>
                          <hr>
                          <div id="video-left">
                                <img src="images/als/ail1.jpg">
                          </div>

和CSS：

.tnav-lvl1-menu li:hover .tnav-play, .tnav-lvl1-menu li:hover .tnav-play-2, .tnav-      lvl1-menu li:hover .tnav-play-3,
.tnav-lvl1-menu-tbar li:hover .tnav-play, .tnav-lvl1-menu-tbar li:hover .tnav-play-2,     .tnav-lvl1-menu-tbar li:hover .tnav-play-3,
.tnav-lvl1-menu li:hover .tnav-play-bottom, .tnav-lvl1-menu li:hover .tnav-play-2-bottom, .tnav-lvl1-menu li:hover .tnav-play-3-bottom,
.tnav-lvl1-menu-tbar li:hover .tnav-play-bottom, .tnav-lvl1-menu-tbar li:hover .tnav-play-2-bottom, .tnav-lvl1-menu-tbar li:hover .tnav-play-3-bottom {
display:block;

Answer 1

可以做这样的事情。

<style>
    /*
        Normal navigation styles assumed here.
        (displays, positions, floats, etc.)
    */
    nav li {
        position: relative;
    }
    nav li > input[type=checkbox] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
        z-index: 1; /* Moves checkbox above 'a' blocking 'a' click. */
    }
    nav li > input[type=checkbox]:checked + ul {
        /*
            Move may have different display stlyes,
            but likely something similar too:
        */
        left: 0;
    }
</style>

<nav>
    <ul>
        <li>
            <a href="#">Click</a>
            <input type="checkbox" />
            <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

这是我的导航工具的旧版本。 http://l33t.roydukkey.com/nav-demo/ 您会看到“更多”项目在点击之前不会切换，但其他项目会在悬停时切换。

更多信息：http://css-tricks.com/almanac/selectors/c/checked/

将“下拉菜单”部分从“悬停”更改为“单击”

1 个答案: