代码之家 › 专栏 › 技术社区 › myol

使用jQuery动画而不显示:块

css html jquery javascript

myol · 技术社区 · 7 年前

我想用 .slideToggle() 切换div display: none display: grid . 然而,这个动画似乎增加了 display: block 内联到html并覆盖任何其他css类

CSS格式

.grid {
    display: grid;
}

jQuery查询

$('#nav-toggle').click(function() {
    $('.nav-menu').slideToggle(500, function() {
        $(this).toggleClass('grid')
    });
});

我在使用

$('#nav-toggle').click(function() {
    $('.nav-menu').slideToggle(500, function() {
         if ($(this).is(':visible')) {
             $(this).css('display','grid');
         }
    });
});

.nav-menu {
    display: none;
    grid-template-columns: repeat(3, 1fr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=nav-toggle>
    Toggle
</div>

<div class=nav-menu>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

但最初的动画似乎使用 显示:块 显示:块 (堆叠的项目)到 (项目间隔)。

如何使初始动画也正确显示?

2 回复 | 直到 7 年前

aloisdg 7 年前

解决方法是将导航菜单设置为 display:grid; 并使用JQuery隐藏和显示它。顺便说一句,如果你有一个用户禁用了JavaScript,他仍然可以阅读你的页面。

$('.nav-menu').hide(); // clearer than display none
$('#nav-toggle').click(function() {
  $('.nav-menu').slideToggle(500, function() {
    if ($(this).is(':visible')) {
      $(this).show(); // clearer than display previous (here grid)
    }
  });
});

.nav-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-toggle">
  Toggle
</div>

<div class="nav-menu">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

有关: https://stackoverflow.com/a/8144998/1248177

myol 7 年前

因此,为了使响应式CSS媒体查询更干净、更容易,我最终包装了 nav 元素,并使div在 display: none display: block .

导航 保留了网格属性。在我的例子中,这个街区是一个更复杂的家庭的孩子 display: grid 布局,但由于它仍然是一个孩子,我仍然可以使用它的CSS网格属性,我只需要使用旧的CSS方法来扩展和中心块。

它不是很干净,但我想这是我能做的最好的,直到jQuery被更新,以支持不仅仅是 显示:块 它的动画。

$('#nav-toggle').click(function() {
    $('.nav-menu-container').slideToggle(500, function() {
        if ($(this).css('display') == 'none') {
            $(this).css('display', '');
        }
    });
});

.nav-menu-container {
    display: none;
}

.nav-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=nav-toggle>
    Toggle
</div>
<div class=nav-menu-container>
    <div class=nav-menu>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前