gpt4 book ai didi

javascript - 从 View 中隐藏 JQuery Accordion 内容

转载 作者:行者123 更新时间:2023-12-02 19:02:52 24 4
gpt4 key购买 nike

我试图使用 JQuery Accordion 代码实现以下目标:

  • 确保页面加载时隐藏在 Accordion 中的内容不会显示(即短暂闪烁)。我只希望用户在展开 Accordion 时看到此内容,但在某些浏览器中我可以在页面加载时看到此内容。
  • 显示 Accordion H1 选项卡(例如 Accordion Test),但如果用户禁用了 Javascript,则不会隐藏其下方的任何内容。

举个例子,这就是我试图模仿的事情:

http://www.outdoorgb.com/c/inflatable_boats_kayaks/

尝试单击“阅读更多”按钮,将显示更多信息。现在尝试禁用 Javascript。您会注意到,单击该按钮不会执行任何操作,并且不会显示更多信息。对此,您可能会说,发生这种情况不是一件好事,因为 Google 可能不会抓取该内容等。但是,通过 Lynx 运行此 URL,它似乎可以很好地读取内容。有人认为这可能是一个问题吗?

无论如何,这是我希望调整以满足我的上述观点的代码:

 <!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />
<title>Accordion Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css" />

<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
});
</script>

</head>

<body>

<div id="accordion">
<h1>Accordion Test</h1>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh.

Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>

</body>
</html>

如果各位专家能够提供任何帮助,我们将不胜感激。

提前非常感谢

乔恩

==================================================

更新

==================================================

感谢 Pete 的帮助,我解决了第一个问题。有人知道如果禁用 javascript 如何解决隐藏内容的问题吗?当前代码如下所示:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />
<title>Accordion Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css" />

<script>

$(document).ready(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
$('#hideAccordion').show();
});

</script>


</head>

<body>

<script language="text/javascript"> document.write('<div id="hideAccordion" style="display:none">'); </script>

<div id="accordion">
<h1>Accordion Test</h1>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh.

Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>

<script language="text/javascript"> document.write('</div>'); </script>

</body>
</html>

最佳答案

你可以尝试类似的事情

<script language="text/javascript"> document.write('<div id="hideAccordion" style="display:none">'); </script>

<div id="accordion">
<h1>Accordion Test</h1>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>

<script language="text/javascript"> document.write('</div>'); </script>

然后在您的文档准备好后,只需调用 $('#hideAccordion').show() 或更好的是,如果有一个函数在您的 Accordion 加载后被调用,请在其中调用此

类似的东西

 $(document).ready(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
$('#hideAccordion').show();
});

编辑

抱歉,我刚刚再次阅读了您的问题,由于您不介意在禁用 JavaScript 时显示内容,因此您只需在样式表中使用以下样式即可:

#accordion div {display:none;}

Accordion 加载后,它应该正常工作,在页面加载时不会显示任何内容。关于这一点,我要指出的一点是,它不是很容易访问,但这仅取决于您是否担心按照 w3c 标准进行编码,并且某些搜索引擎会查找 display:none 如果您像这样隐藏了大量文本,可能会降低您的搜索排名

关于javascript - 从 View 中隐藏 JQuery Accordion 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14627831/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com