Javascript 从视图中隐藏JQuery Accordion内容_Javascript_Jquery_Hide_Accordion_Jquery Ui Accordion

Javascript 从视图中隐藏JQuery Accordion内容

javascript jquery

Javascript 从视图中隐藏JQuery Accordion内容,javascript,jquery,hide,accordion,jquery-ui-accordion,Javascript,Jquery,Hide,Accordion,Jquery Ui Accordion,我试图使用JQuery Accordion代码实现以下目标：确保在加载页面时，手风琴内隐藏的内容不会显示（即短暂闪烁）。我只希望用户在展开手风琴时看到此内容，但在某些浏览器中，我可以在加载页面时看到此内容显示accordion H1选项卡（例如，accordion测试），但如果用户禁用了Javascript，则不会显示隐藏在其下的任何内容举个例子，这就是我试图模仿的东西：尝试单击“阅读更多”按钮，将显示更多信息。现在尝试禁用Javascript。您会注意到，单击该按钮不会执行任何操

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

确保在加载页面时，手风琴内隐藏的内容不会显示（即短暂闪烁）。我只希望用户在展开手风琴时看到此内容，但在某些浏览器中，我可以在加载页面时看到此内容
显示accordion H1选项卡（例如，accordion测试），但如果用户禁用了Javascript，则不会显示隐藏在其下的任何内容

举个例子，这就是我试图模仿的东西：

尝试单击“阅读更多”按钮，将显示更多信息。现在尝试禁用Javascript。您会注意到，单击该按钮不会执行任何操作，并且不会显示进一步的信息。对此，你可能会说，这不是一件好事，因为谷歌可能不会抓取该内容等。然而，通过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>


手风琴试验
$（函数（）{
$（“手风琴”）。手风琴({
可折叠的：是的，
活动：错误，
高度样式：“内容”
});
});
手风琴试验
莫里斯·莫里斯·安特、布兰迪·埃特、奥特莱斯a、苏西比特·埃特。整数ut neque。胎膜早破，胎膜早破，妊娠期，调味品，无核细胞。南阿尼布。
Donec suscipit Peros。南美。维韦拉·利奥·奥迪奥

我们将非常感谢各位专家提供的任何帮助

非常感谢

乔恩

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

更新

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

多亏了皮特的帮助，我解决了第一个问题。如果禁用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>


手风琴试验
$（文档）.ready（函数（）{
$（“手风琴”）。手风琴({
可折叠的：是的，
活动：错误，
高度样式：“内容”
});
$（'hideAccordion'）.show（）；
});
文件。写（“”）；
手风琴试验
莫里斯·莫里斯·安特、布兰迪·埃特、奥特莱斯a、苏西比特·埃特。整数ut neque。胎膜早破，胎膜早破，妊娠期，调味品，无核细胞。南阿尼布。
Donec suscipit Peros。南美。维韦拉·利奥·奥迪奥
文件。写（“”）；

当页面加载时，当我的内容包含在DOM中时，即使内容没有100%的时间显示给用户（例如，在手风琴或滚动工具提示中），Google也会对其进行爬网

如果用户没有启用Javascript，我看不出“阅读更多”文本不可用有任何问题，因为该文本对于使用页面并不重要。我从未听过一个客户或他们的客户报告说禁用的JS存在问题

下面是一些关于禁用JS浏览的有用阅读

如果JS禁用是您的用户组真正关心的问题，那么另一个选项是使用CSS处理您的手风琴

您可以尝试以下方法

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

编辑

很抱歉，我刚刚再次阅读了您的问题，由于禁用javascript后您不想显示内容，因此您可以在样式表中使用以下样式：

#accordion div {display:none;}

一旦手风琴加载，它就可以正常工作，页面加载时不会显示任何内容。关于这一点，我想指出的一点是，它不是很容易访问，但这取决于您是否为按照w3c标准编码而烦恼，一些搜索引擎会寻找大块的文本，而这些文本是

display:none

，如果你有很多像这样隐藏的文本，它们会降低你的搜索排名。内容实际上一直都在那里（看看里面.side，你会发现.readmore\u con）

.readmore\u con只需设置为

display: none;

单击“阅读更多”按钮后，它会将一个.readmore\u open类添加到.readmore\u con div中

display: block;

如果您真的想使用手风琴进行切换，您可以简单地将显示的初始状态定义为：无；到“更多”内容，然后在手风琴的切换过程中进行切换。激活事件：

谢谢Dylan，这消除了我对隐藏Javascript内容的恐惧。谢谢Isotrope。我可以将显示应用于我的div：无，但无法确定我的事件代码应该是什么样子，或者应该放在代码中的什么位置。为新手的问题道歉，尝试自学并不容易。谢谢Pete。我很不好意思这么说，但我的新手kills让我失望，我无法确定此解决方案在我的代码中的外观。我尝试了几件事，但都没有成功。非常感谢您的帮助。谢谢Pete。这解决了我的一个问题。关于如何完全隐藏内容的任何想法（即，单击手风琴不会使内容下降）如果javascript被禁用，我不希望它“优雅地”运行“在我看来，使用CSS直接进入浏览器是一场噩梦，而且看起来总是很难看。我已经更新了上面的当前代码。我添加了css来隐藏答案的内容。太好了，谢谢Pete。工作起来很有魅力。用户在页面上做他们需要做的事情时，不需要看到内容。事实上，它可能会妨碍，因此希望手风琴被最小化等。期望的影响是有信息那里，如果用户想要它，但也有助于搜索引擎优化。有人认为最终的解决方案在谷歌抓取内容方面有什么问题吗@dylanvaladeOk。谢谢你们的帮助。我已经修正了第一点（即，我看不到手风琴的内容在加载时闪烁）。现在有人知道是否有可能进行公关吗

display: block;