slidetoggle 相关问题

slideToggle 无法关闭

这是我的javascript代码，我正在尝试使用slideToggle，它可以单独工作，即使我在文档中使用它，它也可以工作，但不会关闭。 $(".nav-toggle").click(function () { ...

如何设置“未选中”滑动切换组件的颜色？

我可以设置“未选中”滑动切换组件的颜色吗？ 文档仅指定如何设置“已检查”的一项。 在 Slide-toggle-configurable-example.html 模板中： 我可以设置“未选中”滑动切换组件的颜色吗？ 文档仅指定如何设置“选中”一项。 在 Slide-toggle-configurable-example.html 模板中： <md-slide-toggle class="example-margin" [color]="color"> Slide me! </md-slide-toggle> 在 *.ts 文件中： import {Component} from '@angular/core'; @Component({ selector: 'slide-toggle-configurable-example', templateUrl: 'slide-toggle-configurable-example.html', styleUrls: ['slide-toggle-configurable-example.css'], }) export class SlideToggleConfigurableExample { color = 'accent'; checked = false; } 当滑动切换“未选中”时，我真的很想有一些特定的颜色。可以吗？ 为未选中状态设置颜色的唯一可能方法是使用以下规则通过 CSS 设置它： 对于切换栏使用： md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: red; /* set your color here */ } 您还可以根据类型设置不同的颜色： md-slide-toggle.mat-primary:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: pink; } md-slide-toggle.mat-accent:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: yellow; } 要设置拇指的颜色，请使用： md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-thumb { background-color: green; } 要设置 mat-slide-toggle 的颜色，您必须将此代码放入 style.scss 文件中 .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after { background: #F4760B !important; } .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track::after { background: #F4760B !important; }

JavaScript .siblings 方法在 Wordpress 中带有下拉子链接的移动菜单中不起作用

在 bemchemia.pl 网站上，我有一个带有下拉子链接的 Wordpress 移动菜单。我想仅通过单击箭头而不是单击父链接来使用 JavaScript .slideToggle 显示子链接....

有角材质SlideToggle不滑动

我有一个 Angular 组件（“新形式”），它有一个来自 Angular Material 的滑动切换开关。滑动切换在客户端上呈现，但当我单击它时没有任何反应。 我已经安装了...

slideToggle 展开得太远/跳回来

如果您单击徽标下方的“服务”链接，菜单将扩展得有点远，然后快速闪烁，它会恢复到所需的高度。有什么办法可以治愈这个bug吗？ $(文档).ready(功能...

insertAfter() 中断点击事件

我有以下标记，包含 3 个内容块，每个包含一个标题和一些内容： 我有以下标记，由 3 个内容块组成，每个内容块包含一个标题和一些内容： <div class="feed-panels-expanding"> <div class="feed"> <section> <h2><a href="#">Heading One</a></h2> <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p> <div class="content"> <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p> <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> </div> </section> <section> <h2><a href="#">Heading Two</a></h2> <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p> <div class="content"> <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p> <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> </div> </section> <section> <h2><a href="#">Heading Three</a></h2> <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p> <div class="content"> <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p> <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> </div> </section> </div> </div> 我想要它，以便单击每个标题可以展开/关闭下面的内容。 我正在尝试获取它，以便 jQuery 脚本负责隐藏除第一段以外的所有内容。为了做到这一点，它需要第一段并将其移到.content之外。然后它隐藏.content // feed-panels-expanding $('.feed-panels-expanding section').each(function() { $(this).find('h2 a').click(function() { $(this).parent().next('.content').slideToggle(250); return false; }); $(this).find('.content p:first').insertAfter($(this).find('h2')); $(this).find('.content').hide(); }); 然而，脚本确实不喜欢我在每个内容块中移动第一个p 元素。如果我删除该行，则脚本可以正常工作，并且在单击相关标题时所有面板都会展开/收缩。 但是有了那行代码，脚本什么也不做。当我点击标题时，我可以得到一个 alert 语句弹出，但它只是忽略了 .content 元素 next() 在您选择的元素之后查找下一个元素。它不再是content元素。下一个元素是您刚刚插入的段落。 $(this).parent().siblings('.content').slideToggle(250); 这是一个working jsfiddle. 除了第一个内容 div 之外，所有内容 div 最初都是隐藏的。无需删除它并将其放置在其他地方 - CSS 可以通过查找第一个 section 元素然后在其中找到 .content div 来找到它。 对于 jQuery，点击事件查找 section 父元素，然后在其中搜索 .content div 以切换显示。 next 仅查看单个后续兄弟元素，然后应用过滤器。 现在简单修复。将 nextAll 与您的 .content 过滤器一起使用： $(this).find('h2 a').click(function() { $(this).parent().nextAll('.content').slideToggle(250); return false; }); nextAll 只查看后续元素，因此比 siblings 更有效，当您知道元素紧随其后时。 我认为你的问题是内容的选择检查片段 你做了 $(this).parent() 女巫是 h2 标签而不是 .content 并使用 find 更好地找到元素 .content $(this).parent().parent().find('.content').slideToggle(250); // feed-panels-expanding $('.feed-panels-expanding section').each(function() { $(this).find('h2 a').click(function() { //you did $(this).parent() witch is the h2 tag not the scetion and use find better $(this).parent().parent().find('.content').slideToggle(250); return false; }); $(this).find('.content p:first').insertAfter($(this).find('h2')); $(this).find('.content').hide(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="feed-panels-expanding"> <div class="feed"> <section> <h2><a href="#">Heading One</a></h2> <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p> <div class="content"> <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p> <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> </div> </section> <section> <h2><a href="#">Heading Two</a></h2> <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p> <div class="content"> <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p> <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> </div> </section> <section> <h2><a href="#">Heading Three</a></h2> <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p> <div class="content"> <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p> <p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p> </div> </section> </div> </div> 我想你想要的是手风琴。 更多信息：http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery

Navbar Toggler 正在关闭点击屏幕上的任意位置

我的导航栏中有一个下拉菜单。当我调整屏幕大小并使其变小时，会出现导航栏切换按钮，当我单击它时，导航栏菜单会在屏幕左侧打开。我可以...

在 jquery slideToggle 期间停止填充变化

有没有办法在调用 jQuery slideToggle 期间阻止文本移动？ 在下面的示例中，文本在 隐藏时向上移动，在变为 时向下移动 有没有办法在调用 jQuery slideToggle 时阻止文本移动？ 在下面的例子中，文本在<div>隐藏时向上移动，在它变得可见时向下移动... $("a").on("click", function(e) { e.preventDefault(); $("#outer").slideToggle(1000); }); #outer { padding:10px; border:1px solid #aaa; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p><a href="#">Show/Hide</a></p> <div id="outer">Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text</div> 一个解决方案似乎是将 <div> 嵌套在另一个 <div> 中，并在外部 <div> 上进行滑动。但是，如果我可以在不需要嵌套它们的情况下让它工作，它会让我的生活更轻松一些。 $("a").on("click", function(e) { e.preventDefault(); $("#outer").slideToggle(1000); }); #outer { border:1px solid #aaa; } #outer > div { padding:10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p><a href="#">Show/Hide</a></p> <div id="outer"><div>Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text</div></div>

jQuery按钮显示/隐藏具有相同ID的多个div

我有许多产品正在动态填充，所有产品都具有相同的ID和类名。我希望每个“立即购买”按钮都具有自己的div，可通过单击该按钮进行切换。我确实有能力分配...

我如何仅针对我要在foreach循环中显示的那一部分激活和关联slideToggle函数（使用JavaScriot？）>

单击当前切换时删除类

标题有点绕口令。小提琴的简短描述是它是一种切换样式的手风琴，当div之一被切换时，切换状态会改变颜色。我知道了...

如何基于对话框组件中的“取消并是”按钮更新父组件的“材料幻灯片”切换值？

'mat-slide-toggle'在导入后不是已知元素

我正在尝试在已导入MatSlideToggleModule的组件内部使用 Click me！ ，但是我仍然收到消息，它是未知的...

jQuery下拉菜单-slideToggle

$（document）.ready（function（）{$（'。cats_showall'）。click（function（）{$（'。cats_dropdown li'）。slideToggle（）;}）;}）; .cats_dropdown li {显示：无； } .cats_dropdown> li：first -...

Jquery slideToggle（）方法

我已经为FAQ列表编写了简单的代码；每个问题都是在点击事件中打开的，必须手动关闭。有没有办法重新编写此代码，以便在单击问题以打开（...

滑动侧导航栏

我需要制作垂直导航栏，该导航栏向右滑动以显示更多内容，需要帮助。我的目标与此处的蓝色条类似：http://www.teehanlax.com/labs/。导航栏...

如何通过CSS向我的菜单添加深色背景？

我正在将WordPress用于我的网站，并由jQuery自己创建了一个主菜单，当用户单击菜单按钮时，该主菜单将向左滑动。但是有一个大问题：当用户从菜单中单击时...

Jquery slideToggle应该切换列表中的特定列表项

更新使用此JQuery函数$（document）.ready（function（）{$（“。toggleOne”）。click（function（）{$（this）.parent（）。parent（）。parent（）。children （“ .oneContent”）。slideToggle（“ slow”）;}）;} ...

Bootstrap切换崩溃怎么了？它不起作用

我正在将WordPress用于我的网站，并由jQuery自己创建了一个主菜单，当用户单击菜单按钮时，该主菜单将向左滑动。但是有一个大问题：Bootstrap崩溃不起作用...

如何创建和在两个自定义主题之间切换？

我正在尝试在两个自定义主题之间切换。但是，只有我页面上的某些项目可以切换切换点击。如何使其他元素也切换，例如边框，文本和悬停...