JavaScript 手风琴效果不起作用，与伪类有关？

发布于 2024-08-29 10:09:28 字数 688 浏览 10 评论 0原文

我尝试根据该视频使用 JavaScript 制作手风琴效果，更改了一些内容，例如使用输入按钮而不是选择器的链接。但是由于某种原因它不起作用。每次我尝试使用 Firefox 错误控制台时，它都会输出未知的伪类或伪元素“visible”。有什么问题吗？

$("div.example").hide();
$("input.exampleButton").click(function(){
    $("div.example:visible").slideUp("slow");
    $(this).parent().next().slideDown("slow");
    //return false; if you don't want the link to follow
});

这是 HTML

input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>
input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>

原文

I tried to make an accordion effect with JavaScript based off this video altering a few things like using an input button instead of a link for the selector. However for some reason it's not working. Firefox error console outputs unknown pseudo-class or pseudo-element "visible" every time I try to use it. What's the problem?

$("div.example").hide();
$("input.exampleButton").click(function(){
    $("div.example:visible").slideUp("slow");
    $(this).parent().next().slideDown("slow");
    //return false; if you don't want the link to follow
});

Here is the HTML

input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>
input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挥剑断情 2024-09-05 10:09:29

您可以忽略控制台中的警告。代码不起作用的原因是标记结构与 Javascript 完成的遍历不匹配。每个可能应该位于

内，以便正确调用 parent().next()从输入转到其后面的

。您还缺少输入上的开头 < ，但我认为这是复制/粘贴错误。

工作标记：

<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>
<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>

You can ignore the warning in the console. The reason the code is not working is that the markup structure doesn't match the traversal done by the Javascript. Each <input> should probably be inside a <div>, so that the call to parent().next() will correctly go from the input to the <div class="example"> following it. You're also missing the opening < on the inputs but I assume that's a copy/paste error.

Working markup:

<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>
<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>

回复收藏 0 原文

~没有更多了~