javascript - 将 jQuery slideToggle() 添加到 anchor 链接上的 oncliked 事件

Question

我已经搜索了整个网络，但没有找到解决我问题的方法。我在固定标题中有一些 anchor 链接，如下所示:

 <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() 选定的表格(带有 anchor 链接)以显示它，并隐藏任何以前“滑动”的表格。我已经尝试了很多 jQuery 代码，但都没有用。我必须向这些 anchor 链接的 onclick 事件添加什么事件/函数？

Answer 1

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

我已经在 fiddle 中复制了您的环境并将代码放入其中，这是 fiddle :https://jsfiddle.net/wo9n0yLt/

代码如下:

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

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

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