0

I seen another member post this: http://jsfiddle.net/Q4PUw/2/ But I can't get it to work.

He used someone else's example with the <div class="sitesection"> so I'm not sure how that works. All I want is a link that says "Expand" and it the text will scroll out after the link is clicked.

What is the javascript part supposed to look like? This: ?

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

I believe I messed the DIV up, as I don't know where to use it. But when I click the link in the example, it just brings up www.mysite.com/page.html# As the ahref is #.

4

2 回答 2

1

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

试试这个：

<script language="javascript">
 $('.expand-one').click(function(event){
      e.preventDefault();
      $(this).slideToggle('slow');
});
</script>
于 2013-09-09T18:56:00.003 回答
0

我再次更新了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>标签之前。

于 2013-09-09T20:46:43.210 回答