Question

https://universaltechnologiescorp.com是我的网站。左侧的类别菜单（产品型号）在鼠标悬停和关闭时设置为打开。我希望它在鼠标点击时打开..

我建立在jquery上，但它不起作用。可以帮助解决这个问题吗？

由于

Answer 1

最简单的方法是在点击li时将导航链接设置为活动状态，并在下面显示子导航内容的嵌套ul，并仅在活动li中显示此ul。

然后jquery只用于切换li的活动状态，甚至不需要它 - 普通的js可以做到这一点。

你也可以用一些奇特的css3动画来制作它 - 而不仅仅是切换diplay状态。请注意，我构建它是为了演示这个概念 - 而不是试图获取导航结构并对其进行修改。

$('.navigation li').click(function(){
  $('.navigation li').removeClass('active');
  $(this).addClass('active')
 })

.navigation {list-style: none;margin-left:0;padding-left:0;}
.navigation > li a {font-size: 1.2em; margin-bottom: 15px; cursor:pointer}
.navigation > li ul {display:none}
.navigation > li.active ul {display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul  class="navigation">
    <li class="active">
      <a>Option 1</a>
      <ul class="sub-navigation">
        <li>option 1a</li>
        <li>option 1b</li>
        <li>option 1c</li>
      </ul>
    </li>
    <li>
      <a>Option 2</a>
      <ul class="sub-navigation">
        <li>option 2a</li>
        <li>option 2b</li>
        <li>option 2c</li>
      </ul>
    </li>
    <li>
      <a>Option 3</a>
      <ul class="sub-navigation">
        <li>option 3a</li>
        <li>option 3b</li>
        <li>option 3c</li>
      </ul>
    </li>
  </ul>
</nav>

如何显示菜单上的点击而不是鼠标悬停与jquery和CSS？

1 个答案: