Question

我正在编写一个页面，其中包含多个动态/可排序表格（一个在另一个下面）以共享PDF文档。表中的每个文档都包含一个链接，用于在新选项卡中打开PDF。一切正常，但当我向下滚动页面并打开动态表格/或最小化表格时，页面跳转到页面顶部/默认位置。 JavaScript的RETURN FALSE解决了这个问题，但表中的所有链接都已死亡。有人可以帮忙解决这个问题吗？我在这里附上了基本的代码结构，你可以看到我在做什么......

HTML：

<div id ="fifth">
<ul id="droptable">
        <li><a href="#"><h1>Tittle of The Dynamic Table5</h1></a>
<div>
<table class="sortable" width="100%" border="0">
<tr>
<td id="tablehead" width="55%">Sort by tittle</td>
<td id="tablehead" width="25%">Sort by Author</td>
<td id="tablehead" width="25%">Sort by date</td>
</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document1.pdf" target="_blank">Document1Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document2.pdf" target="_blank">Document2Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document3.pdf" target="_blank">Document3Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX<a></td>
</tr>
</table>
    </div>
  </li>
</ul> 

</div>

JAVASCRIPT：

// Dropdown Table Code
$(function(){
$('#droptable li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300); // If I add RETURN FALSE here the page doesn't jump to the default position/to the top of the page (when open or minimize the table) BUT links in the table are out and don't work anymore //
  });        
  });                
  });

Answer 1

2件事

第一个ID应该是唯一的，因此请更改

的所有实例

 id="tabledata"

到

 class="tabledata"

第二，尝试给你包含与具有数据的链接不同的类的链接，然后将幻灯片切换到该类，可能是：

$('.newclass').each(function(){
 .....

Answer 2

我没有给你提供的提示成功，但无论如何，谢谢！打开/关闭桌子时，我做了所有事情，但页面仍在跳跃。但是......我正在浏览不同的论坛并找到了这个简单的答案。

使用“＃/”代替“＃”，页面不会跳转。嗯..有时答案太简单了，似乎：o

<div id ="fifth">
<ul id="droptable">
    <li><a href="#/"><h1>Tittle of The Dynamic Table5</h1></a> ...

Rock'nRoll！

下拉内容/表和页面跳转

2 个答案: