时间戳

首页 > 解决方案 > 点击时从“显示：无”到“显示：内联”的转换

javascript - 点击时从“显示：无”到“显示：内联”的转换

问题描述

我尝试使用带有属性转换的 CSS 创建一个带有子菜单的菜单。

为了出现菜单，我使用 javascript 更改了上面元素的类：

  $('.menu>li').each(function()
    {
        $(this).removeClass('current');
        var elem = this;
        $(elem).find('>a').click(function(event)
        {
            if ($(elem).find('.submenu').length)
            {
                event.preventDefault();
                if($(elem).hasClass('current'))
                {
                    $(elem).removeClass('current');
                }
                else
                {
                    $('.current').removeClass('current');
                    $(elem).toggleClass('current');
                }
            }
        });
    });
.menu li .submenu
{
  display:none;
  transition: all 2s linear;
}

.menu .current .submenu
{
  display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='menu'>
  <li><a href='#'>Menu 1</a>
    <ul class='submenu'>
      <li>Subemenu 1.1</li>
      <li>Subemenu 1.2</li>
      <li>Subemenu 1.3</li>
    </ul>
  </li>
  <li><a href='#'>Menu 2</a>
    <ul class='submenu'>
      <li>Subemenu 2.1</li>
      <li>Subemenu 2.2</li>
      <li>Subemenu 2.3</li>
    </ul>
  </li>
</ul>

但是过渡不起作用，我不明白为什么。

感谢您的帮助。

标签： javascriptjquerycss

解决方案

您无法对其进行转换，因为原始值和最终值之间没有值。

您需要转换一个动画属性。

https://www.w3schools.com/cssref/css_animatable.asp

大多数具有值编号的属性都是可动画的

推荐阅读