javascript - 切换功能仅在 safari 中工作之前添加分栏符

标签 javascript css

我在 2 列 columncount 设计中有一些 li 元素。我想向网站添加以下功能:如果您单击一个 div 元素(在 li 元素内),它应该添加一个类:

-webkit-column-break-before:always;
-moz-column-break-before:always;
background-color: fuchsia; /* only for demonstration */

使用此函数,我可以强制将以下元素 float 到第二列。我需要这个来打印。

不幸的是,这仅适用于 Safari,不适用于 Chrome 或 Firefox(始终使用最新版本)。

请点击我的 fiddle 中的灰色元素以正确理解我的描述: https://jsfiddle.net/nickkkk/9nrtdg6q/3/

最佳答案

首先,您应该在添加 js 文件之前添加 jquery。

1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2. <script src="./main.js" type="text/javascript"></script>

其次,不要忘记 document.ready 函数。

第三,您要切换的类必须用分号单独添加。

$(document).ready(function() {

    $('.day').click(function() {
    $(this).toggleClass('toggled', 'day');
  });

})

希望这会有所帮助 ;-)

关于javascript - 切换功能仅在 safari 中工作之前添加分栏符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51755936/

相关文章:

javascript - XMLHttpRequest:实现拦截器问题

html - float 问题 - 当宽度大于页面宽度时 Div 下降

html - 每个屏幕尺寸的最大高度 - bootstrap

jquery - CSS - 设置高度页眉/页脚,动态内容..不适用于 osXsafari/iOSsafari? (jsBin)

html - 子子菜单的行为不正常

javascript - 如何在 Redux-Form 的提交事件中获取表单值?

javascript - $().load() 不传递变量

javascript - 将源代码发送到外部服务器

javascript - 如何检查iframe中是否存在特定的句子?

css - 透明图像 flex 轮廓(不是矩形边框)