Javascript 我如何让这个可折叠的潜水器工作？

我看到另一位成员发布了以下内容： 但我不能让它工作

他在

中使用了其他人的例子，所以我不确定这是怎么回事。我所需要的是一个链接，上面写着“展开”，点击链接后，文本将向外滚动

javascript部分应该是什么样子的？ 这个：

$（'.expand one'）。单击（函数（）{
$（'.content one'）.slideToggle（'slow'）；
});

我想我把潜水器弄糟了，因为我不知道在哪里使用它。但是，当我单击示例中的链接时，它只会显示www.mysite.com/page.html#

---

由于ahref是#。

如果单击锚定，则本机浏览器行为将遵循href url，因此必须防止锚定标记的默认行为

试试这个：

<script language="javascript">
 $('.expand-one').click(function(event){
      e.preventDefault();
      $(this).slideToggle('slow');
});
</script>

$（'.expand one'）。单击（函数（事件）{
e、 预防默认值（）；
$（this.slideToggle（'slow'）；
});

我再次更新：）

HTML

<a href="#" class="expand" data-class="one">Click Here To Display The Content</a>

<p class="content one">
  This is the content that was hidden before, but now is... Well, visible!"
</p>

<a href="#" class="expand" data-class="two">Click Here To Display The Content</a>

<p class="content two">
  This is the content that was hidden before, but now is... Well, visible!"
</p>

CSS

.content{
  display: none;
}
.expand {
  background: #555;
  display: block;
  float: left;
  clear: left;
  margin-bottom: 15px;
  padding: 2px 5px 2px 5px;
  font-family: Verdana;
  font-size: 13px;
  text-decoration: none;
  color: #fff;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;

  transition: color 0.2s linear;
  -moz-transition: color 0.2s linear;
  -webkit-transition: color 0.2s linear;
}
.expand:hover {
  color: #47b7ef;
}

---

*注意：将脚本放在

标记的前面。

你能发布你的提琴吗，这样我们就可以看到你做错了什么？如果你点击JSFIDLE，它会像你期望的那样工作吗？听起来你想复制这个，但遗漏了部分内容，但我们看不出你的问题是什么。为什么不在JSFIDLE上发布代码（只需单击示例上的fork，进行更改，保存并链接到这里）！用于声明脚本语言的DOCTYPE？谢谢你的快速回复。直到现在，我还从未见过小提琴。我链接的那个确实对我有用。我真的不知道我在做什么。我只是在努力尝试尝试反复尝试。我所做的一切都是在上面的脚本代码中，{“本机浏览器行为将遵循href url”是的，Milche说，它也在做同样的事情。我不知道，我做错了什么。我犯了一个noob错误，我不是100%确定我在做什么。我确定它与javascript有关。这不正确吗？$（'.展开一个）。单击（函数（e）{e.preventDefault（）；$（'.content one'）.fadeToggle（'slow'）；}）；转到站点并下载压缩的生产jQuery 1.10.2，然后将其放入根文件夹和所有可以使用的内容中；）当然可以用

来称呼它，或者如果你使用的是HTML5而不是

***好的，我知道了。当我把它放在头部部分时它不起作用，但在身体之前就起作用了。这正常吗？谢谢你的帮助！总是把脚本放在

之前，你可以把库放在

部分，但是脚本总是放在之前e> 。哦，还有一个问题。我想在一个页面上做大约10个不同的，我该怎么做？当我现在这样做时，它会扩展所有这些。这很难吗？

$('.expand').click(function(e){
  e.preventDefault();

  var dataClass = $(this).attr('data-class');    

  $('.content.'+dataClass).fadeToggle('slow');
});

.content{
  display: none;
}
.expand {
  background: #555;
  display: block;
  float: left;
  clear: left;
  margin-bottom: 15px;
  padding: 2px 5px 2px 5px;
  font-family: Verdana;
  font-size: 13px;
  text-decoration: none;
  color: #fff;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;

  transition: color 0.2s linear;
  -moz-transition: color 0.2s linear;
  -webkit-transition: color 0.2s linear;
}
.expand:hover {
  color: #47b7ef;
}