Question

我看到另一位成员发帖： http://jsfiddle.net/Q4PUw/2/ 但我无法让它发挥作用。

他使用了<div class="sitesection">的其他人的例子，所以我不确定它是如何工作的。我想要的只是一个显示“展开”的链接，单击链接后文本将滚动出来。

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

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

我相信我搞砸了DIV，因为我不知道在哪里使用它。但是当我点击示例中的链接时，它只会显示www.mysite.com/page.html# 因为ahref是＃。

Answer 1

如果单击锚点，则本机浏览器行为将跟随href url，因此您必须阻止锚标记的默认行为。

试试这个：

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

Answer 2

我再次更新了Fiddle：）

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

<强> Jquery的

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

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

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

<强> 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;
}

*注意：将脚本放在</body>标记之前。

如何让这个可折叠的DIV工作？

2 个答案: