问题标签 [sidr]

I want to show different menu based on different devices like for mobile and table I want to show menu using sidr. and for large devices menu representation should be fixed bootstreap menu. How to achive this my code is

My code is

My complete code is HERE

我在 Wordpress 中使用 Sidr Menu 插件。Sidr 在其移动布局中有几个问题，我使用一些 javascript 修复了这些问题。

这段代码隐藏了侧边栏的子菜单，并在开头添加了一个可点击的箭头，然后使用 jQuery 的切换功能来改变箭头的方向并显示或隐藏子菜单。在 Chrome（移动和桌面）和 Firefox 上，这可以完美运行。

在 Safari（移动和桌面）和默认的 android 浏览器上，这不起作用。hide() 和 show() 方法完美运行，但没有重绘。菜单展开以允许显示子菜单，但不显示子菜单（和标题）。根据每个浏览器中的开发人员工具，显示被设置为适当的阻止或无。

我听说 Safari 可能存在不重绘事物的问题（因为它是 Webkit，但 Chrome 也是如此，所以......）。解决方案当然是使用 hide() 和 show() 来强制重绘。就我而言，这显然行不通： hide() 和 show() 是问题所在。我试过不使用 jQuery，还尝试添加和删除一个“hideThis”类，该类的样式设置为不显示。唯一有效的是使用 hide(2000)，但这仅适用于您展开的第一个菜单，并且并非每次都有效。

我已经在两部 iPhone 和两部 Android 手机以及运行 Safari 的 Windows 桌面上对此进行了测试，它们的反应完全相同。

你可以在http://test.langcliffeavoca.church看看这个

编辑：Hide() 和 show() 绝对没有区别 - 我尝试隐藏和显示 this()、this.parent() 和 this.children()，并尝试多次这样做，但没有任何帮助。通过调试，我知道事件被正确触发。我也知道这些元素实际上是被显示和隐藏的，因为我可以在浏览器中关闭并重新打开侧边菜单，并且一切都正确显示。它只是没有被重绘。这适用于 Chrome、Firefox、Edge 和 Internet Explorer，但不适用于 Safari 或原生 Android。

我在 Wordpress 中使用 Sidr 来创建移动导航，我试图在点击时制作可折叠的子菜单但失败了。这是我的代码，但不起作用。

任何提示或帮助将不胜感激。

http://jsfiddle.net/L9wrt41g/

使用 Sidr 菜单。

默认情况下，子菜单是隐藏的。

但正如您在小提琴中看到的那样，Sub List 2 有一个活动类。

试图弄清楚如果其子菜单之一具有活动类，则默认情况下如何使父子菜单可见。

因此（因为子菜单项有一个活动类），在页面加载时（以及单击“切换菜单”后）它应该默认可见，如下所示：

https://s23.postimg.org/uealsexqj/sidr.png

我正在学习 webpack，并且想将 sidr 导入到我的项目中。我应该怎么做？我试过了：

但它找不到模块“sidr”

我试图添加

在此之后它可以找到，但随后失败

另外，如果可以将 sidr 导入到我的 es6 主文件中，如何启动它？

我对编程很陌生，并且有一个严肃的问题（就我的水平而言）。我正在使用 sidr-plugin（从这个站点获得：https ://premium.wpmudev.org/blog/how-to-add-side-menus-to-a-wordpress-theme/ （底部的更新版本))，我想知道，是否可以在 wordpress 上使用简单的 SiteOrigin 按钮小部件来复制其中一个 sidr 菜单并打开它？这是我在主题中与插件一起使用的内容：

我在我的 Drupal 7 网站中使用 Sidr 来创建响应式菜单。我正在使用带有Sidr 库的响应式菜单模块。我还在我的网站中启用了聚合 JavaScript 和 CSS 文件选项。已经有一个用于大屏幕（例如桌面等）的菜单，我已将此元素的 id（即#main-menu）传递给 Sidr，如文档中所建议的那样。我还没有安装jQuery 更新模块。因此，我相信我使用的是 Drupal 7 框架提供的默认 jQuery。在我的 PC 的 Chrome 控制台中运行返回 1.4.4。console.log(jQuery.fn.jquery);

问题是在移动设备中，每当我触摸菜单按钮时，它都会附加#sidr-0在 URL 中，www.example.com/#sidr-0 并且在第一次尝试时没有任何反应。但是，它从第二次开始就开始顺利运行。同样从第二次开始，没有附加任何内容到 URL 并且它保持不变，即www.example.com

这发生在所有设备上（我已经在 Android 和 iPhone 上检查过）。似乎它第一次尝试加载 sidr 库，一旦下载到设备，它就开始正常工作。

这个问题有什么解决方法吗？我当然不喜欢任何用户两次触摸菜单图标。它也给人一种负面的印象。

我正在尝试使用 Sidr ( berriart.com/sidr ) 滑动面板，一切正常，但在智能手机上，打开和关闭动画不流畅，移动不顺畅。有没有使动画流畅的解决方案？

在 .ts 文件中：

我正在开发一个使用 sidr 菜单的网站。该站点还使用模态窗口来显示内容。当用户按下菜单项并打开一个模式窗口时，该窗口将在 sidr 菜单下方打开。

我是不是该：

A. 将模态窗口堆叠在 slidr 菜单上方，以便可以看到全部内容？当切换菜单按钮被覆盖时，这可能会起作用。

B. 强制关闭菜单，这样模式窗口就不会关闭。

我认为更改模式窗口的 z-index 会起作用，但我无法将其加载到菜单上方。菜单的 z-index 是 999999。我为模态窗口尝试了 1,000,000，但它仍然在菜单下方加载。

我还能尝试什么？

我正在使用 Sidr ( https://github.com/artberri/sidr ) 和 bodyScrollLock ( https://github.com/willmcpo/body-scroll-lock/ )。当我在没有 Sidr 的情况下使用 bodyScrollLock 时，它可以正常工作，但是当我将它与 Sidr 一起使用时，当我单击菜单按钮时，它会跳转到页面顶部。我还尝试从 Sidr 的onOpen和onClose事件中删除 bodyScrollLock，打开菜单，然后输入bodyScrollLock.disableBodyScroll();JavaScript 控制台，它仍然会将页面滚动到顶部，所以问题一定是 Sidr 显示菜单的方式。这是我用来打开 Sidr 并禁用正文滚动的代码：

任何想法如何阻止页面滚动到顶部？

（附带说明一下，如果 Sidr 有内置选项以在菜单可见时禁用正文滚动，那就太好了。）