Tag: responsive design

切换菜单onclick，单击菜单链接关闭 – 但仅限于移动视图

当窗口宽度低于768px时，我为单页网站制作了响应式菜单，切换到可切换菜单。 基本上我希望通过单击标题来切换菜单，然后通过再次单击菜单链接（ li -element）来关闭菜单。 到目前为止我的jQuery代码： jQuery(document).ready(function() { var e = $(“#pull”); menu = $(“#header ul”), $(e).on(“click”, function(e) { e.preventDefault(), menu.slideToggle() }), $(window).resize(function() { menu.is(“:hidden”) && menu.removeAttr(“style”) }) }); $(“#header ul”).on(“click”, “li”, function () { $(“#header ul”).hide(); }); 还有一个演示的jsfiddle： http ： //jsfiddle.net/ansoqvms/2/ 因此，单击标题时打开和关闭菜单工作正常。 当点击菜单li -element时，菜单也会消失。 遗憾的是 ，当单击菜单链接时，菜单不仅会在移动视图中消失，而且还会在普通视图中（> 768px）消失。 我尝试使用if($(window).width() < 768px) ，但这不是跨浏览器的快乐。 我也尝试使用if($(‘#pull’).is(‘:visible’)) ，因为#pull仅在移动视图中可见，但它也没有用。

在JQuery Mobile中使可折叠集的function响应

我正在设计一款适用于台式机，平板电脑和手机的应用。 我有一些可折叠的内容，我希望在桌面浏览器和ipad格局中插入，但不能插入平板电脑肖像和手机上。 我有其他响应元素正常工作，但以下的HTML和CSS无法正常工作： HTML Header 1 Content here CSS @media all{ .storage_devices {data-inset: “true”;} } @media (max-device-width: 520px) and (orientation:portrait) { .storage_devices {data-inset: “false”;} } 我假设JQuery Mobile库正在标记html，因此该类没有正确识别div。 我也尝试过id而没有运气。 谢谢

使用jQuery从选择菜单中删除列表项

我有一小部分脚本允许用户调整窗口大小以将无序列表转换为选择菜单。 但是，我想从选择菜单中删除任何嵌套的无序列表。 演示： http ： //jsfiddle.net/k7272/ 所以基本上使用上面的例子，部分’test’不会出现在选择菜单中，但仍然会出现在无序列表中。 我该如何实现这一目标？ 这是我的Javascript： // DOM ready $(function() { // Create the dropdown base $(“”).appendTo(“nav”); // Create default option “Go to…” $(“”, { “selected”: “selected”, “value” : “”, “text” : “Go to…” }).appendTo(“nav select”); // Populate dropdown with menu items $(“nav a”).each(function() { var el = $(this); $(“”, { “value” […]

砌体给容器0高度

我正在研究一些涉及响应式砌体布局的东西。 我有一个容器，其最大宽度为960px但随着浏览器缩小。 我的网格项目具有基于百分比的宽度（100％，66.666666etc％，33.33333etc％）。 出于某种原因，当我将一个函数传递给columnWidth选项时，它总是给容器一个高度为0.这就是我实例化Masonry的方式。 $(window).load(function() { var $container; $container = $(“#grid_container”); $container.masonry({ columnWidth: function(containerWidth) { return containerWidth / 3; }, itemSelector: “.grid_item”, isFitWidth: true, isResizable: true, gutter: 10 }); }); 知道为什么会这样做吗？ 因为我使用$(window).load它应该能够计算高度。 我错过了一些非常明显的东西吗？ 是否根本不可能使用百分比列宽与砌体？

选项卡面板可以在移动视图中滑动？

我有一个标签式菜单，我希望在移动视图中可以滑动选项卡式菜单（ ul class=”tabs” ）。 编辑：我发现使用Slick JS的片段，我从来不知道这个JS，但我希望它在我当前的选项卡式菜单上应用这个codepen 。 如何正确地结合我当前的标签菜单？ 我试图将它组合起来，但我的选项卡式菜单的当前UI设计变得混乱了。 这是我的选项卡式菜单 Tab 1 Tab 2 Tab 3

iPhone X网站安全区

iPhone X横向默认安全区域和陷阱解决方案。 我添加了这个问题，以帮助其他人避免头痛我试图在新的iPhone 10上修复我的网站 基本上，问题是白条

更改背景图片onClick

如何使用jquery或java脚本更改onClick上的背景图像？ 例如：我有六（6）张图像，当我点击“>”（下一个箭头）时我想要更改为下一个背景图像，当我点击“<”（后退箭头）时，我想要更改为上一个背景图像。 我正在使用响应式html5和css3开发此网站。

使用SnapSVG的响应式SVG路径

是否可以使用SnapSVG获得响应path ？ 我在CodePen上构建了以下实验 ，任何我希望我的path能够响应。 我在笔的第9行使用以下代码构建我的路径： var myPathC = snapC.path(“M62.9 14.9c-25-7.74-56.6 4.8-60… 然而，当浏览器窗口resize时，我希望响应或重新绘制这条路径。 任何人都知道这是否可行和/或有任何想法如何处理它？

是否可以使用伪元素使包含元素环绕绝对定位的元素（如clearfix）？

我正在为我的网站制作一个轻量级的响应式jQuery滑块，并使用了非常常见的标记： HTML： CSS： #slider { width:80%; max-width:800px; margin:0 auto; } #slider ul { margin:0px; padding:0px; list-style:none; width:100%; } #slider ul li { width:100%; position:relative; } #slider img { width:100%; position:absolute; top:0px; box-shadow:0px 20px 40px rgba(0,0,0,.66); } #slider img.active { z-index:1; } 我遇到的问题是我的绝对定位幻灯片正在做他们应该做的事情并从页面结构中删除它们。 （这不是我希望他们做的，但它是堆叠它们的简单方法）。 我一直在阅读有关今天的CSS Pseudo-Elements以及人们正在使用它们的所有很酷的东西。 它让我想到……他们可以用来“清除”这些绝对定位的元素吗？ 我的想法是，可能有办法做以下事情： #slider img:before { content:””; display:block; position:static; } 显然需要更多的样式来实现这一点（因为它不会渲染我想要的东西……我知道此时你可能会想到“为什么不指定容器的高度并完成用它？“嗯，幻灯片的响应意味着当它们收缩时，容器的高度也会缩小。 […]

为什么我的jQuery不响应窗口大小调整？

我正在使用jQuery在页面转换时添加一些元素（通过jQuery Transit插件）。 由于我正在尝试响应式设计，我希望这些转换仅在浏览器具有特定大小或更大时才会发生。 我写了以下代码作为尝试这样做： $(document).ready(function(){ var $window = $(window); var $logo = $(‘.logo’); function checkWidth() { windowsize = $window.width(); } checkWidth(); $(window).resize(checkWidth); if (windowsize >= 768) { $logo.hoverIntent( function(){ $logo.transition({ perspective: ‘600px’, rotateY: ‘-10deg’ }); }, function(){ $logo.transition({ perspective: ‘600px’, rotateY: ‘0deg’ }); } ); } }); 如果我在大型浏览器中加载页面，它会按预期工作 – hover效果处于活动状态。 如果我调整浏览器的大小，使其缩小（超过断点）并刷新，则可以正常工作 – 禁用hover效果。 但是如果我在没有刷新的情况下调整窗口的大小，则效果不会响应 – […]