【问题标题】:Clickable show/hide accordion menu using CSS使用 CSS 的可点击显示/隐藏手风琴菜单
【发布时间】:2012-11-15 19:08:32
【问题描述】:

我需要一些帮助来调整这个小手风琴菜单并将悬停效果替换为点击效果,这意味着每当我点击它时显示/隐藏,而不是仅仅将鼠标悬停在它上面。

http://www.deluxeblogtips.com/2010/04/accordion-menu-css3-transition.html

我对 CSS 的了解并不多,我学到的所有东西都是即时的,但这对我来说太难了。我研究了其他选项,例如 :target,但我认为您不能同时使用它来显示和隐藏。

【问题讨论】:

  • 您应该先在jsfiddle.net 上获取一些信息,然后尽可能地获取它,然后寻求帮助。

标签: css menu hide accordion show


【解决方案1】:

尝试使用 jquery .slideDown() http://api.jquery.com/slideDown/ 、 .slideUp() http://api.jquery.com/slideUp/ 和 .slideToggle() http://api.jquery.com/slideToggle/

【讨论】:

    【解决方案2】:

    你可以使用你的 CSS 选择器

    #accordion div:hover {...} and #accordion div:hover a {...}
    

    并将它们替换为

    #accordion .item.active {...} and #accordion .item.active a {...}
    

    然后用 jQuery 添加点击功能

    $('#accordion').on('click', '.item', function(){
       $('.item').not(this).removeClass('active');
       $(this).toggleClass('active');
    });
    

    你就完成了。完整代码

    https://jsfiddle.net/logiccanvas/ntgcj0mf/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-11-22
      • 2021-10-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-03-12
      • 1970-01-01
      • 2018-09-22
      相关资源
      最近更新 更多