Question

我搜索了整个网络，但我找不到解决问题的方法。我有一些固定标题中的锚链接，如下所示：

 <ul>
 <li class="dropdown">
    <a href="#" class="dropbtn">Tab1</a>
    <div class="dropdown-content">
       <a href="#s1">link1</a>
       <a href="#s2">link2</a>
    </div>
 </li>
 <li class="dropdown">
  <a href="#" class="dropbtn">Tab2</a>
  <div class="dropdown-content">
      <a href="#s3">link3</a>
      <a href="#s4">link4</a>
  </div>
</li>
<li class="dropdown">
 <a href="#" class="dropbtn">Tab3</a>
 <div class="dropdown-content">
  <a href="#s5">link5</a>
  <a href="#s6">link6</a>
  <a href="#s7">link7</a>
 </div>
</li>
<li class="dropdown">
  <a href="#" class="dropbtn">Tab4</a>
  <div class="dropdown-content">
    <a href="#s8">link8</a>
    <a href="#s9">link9</a>
    <a href="#s0">link10</a>
  </div>
</li>
</ul>

在我的应用程序中，所有这些部分都是隐藏的（.content{display:none;}，content作为表的类）。例如：

<div class="content">   
  <p>I am a section.</p>
     <div style="overflow-x:auto;">
         <table class="normal" id="s1">*data*</table>
     </div>
</div>

现在，我想slideToggle()所选表格（使用锚点链接）以显示它，并隐藏任何以前“滑动”的表格。我尝试了很多jQuery代码，但都没有。我可以在这些锚链接的onclick事件中添加什么事件/功能？

Answer 1

HTML

<a id="tab1" onclick="toggleTable();" href="#">Link</a>

的JavaScript

function toggleTable() {
     $('#YourTableID').toggle('slow');
     $('#AlreadyOpenedTableID').hide();
}

Answer 2

您可以使用slideUp()和slideDown()而不是slideToggle()的单独计数在jQuery中完成此操作。

我已经用小提琴复制了你的环境并删除了代码，这里是小提琴：https://jsfiddle.net/wo9n0yLt/

代码如下：

＆＃13;

$('.menu > li > a').click(function() {
  var tab = $(this).attr('href');
  $('table').each(function() {
    $(this).slideUp();
  });
  $(tab).slideDown();
});

＆＃13;

table {
  display: none;
  padding: 1em;
  border: 1px solid red;
}

＆＃13;

<h2>
  My Menu Toggler
</h2>
<ul class="menu">
  <li><a href="#tab1">One</a></li>
  <li><a href="#tab2">Two</a></li>
  <li><a href="#tab3">Three</a></li>
</ul>
<table id="tab1">
  <tr>
    <td>TABLE 1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
<table id="tab2">
  <tr>
    <td>TABLE 2</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
<table id="tab3">
  <tr>
    <td>TABLE 3</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

＆＃13;

将jQuery slideToggle（）添加到锚链接上的oncliked事件

2 个答案: