Question

我正在尝试使用JQuery Accordion代码实现以下功能：

确保在页面加载时不会显示隐藏在手风琴中的内容（即短暂闪烁）。我只希望用户看到这个内容，如果他们扩展手风琴，但在某些浏览器中，我可以在页面加载时看到这些内容。
显示手风琴H1标签（例如手风琴测试），但如果用户禁用了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>

我们非常感谢你们中任何一位专家提供的任何帮助。

非常感谢提前

乔恩

============================================== < / p>

更新

============================================== < / p>

感谢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>

Answer 1

Google会在页面加载时抓取我的内容，即使内容未在100％的时间内显示给用户（例如在手风琴或翻转工具提示中）。

我没有看到＆＃34的任何问题;阅读更多＆＃34;如果此人没有启用Javascript，则该文本不可用，因为该文本对于使用该页面并不重要。我从来没有从单个客户那里听到过他们客户的报告，也没有从禁用的JS中找到问题。

以下是关于禁用JS浏览的一些有用的阅读Browser statistics on JavaScript disabled

如果JS禁用是您的用户组的真正关注点，那么另一个选项是使用CSS来处理您的手风琴 http://www.hongkiat.com/blog/css-content-accordion/

Answer 2

您可以尝试类似

的内容

<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()或更好，如果有一个函数在您的手风琴加载后调用它

类似

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

修改

很抱歉，我刚刚再次阅读了您的问题，因为您不会在禁用javascript时显示内容，只需在样式表中使用以下样式：

#accordion div {display:none;}

一旦手风琴加载，它应该正常工作，而不会在页面加载时显示任何内容。我要说的一点是，它不是很容易访问，但它只取决于你是否对编码为w3c标准感到困扰，而且有些搜索引擎会查找display:none的大块文本并且可以降低如果你有很多像这样的文字隐藏你的搜索排名

Answer 3

您提供的示例只是切换一个类。内容实际上一直存在（看看里面。你会找到.readmore_con）。

.readmore_con只是设置为

display: none;

单击“Read More”按钮，它会将.readmore_open类添加到.readmore_con div。.readmore_open的CSS？...你猜对了：

display: block;

如果你真的想使用手风琴来进行这种切换，你可以简单地定义一个初始状态：display; none;到你的“更多”内容，然后在手风琴的.activate事件中切换： http://api.jqueryui.com/accordion/#event-activate

从视图隐藏JQuery手风琴内容

3 个答案: