Javascript 手风琴+制表符=以前的内容不会消失

当我点击来自不同手风琴元素的不同链接时，内容显示在上一个链接的下方

$'.accordion'。单击'.accordion控件'，函数{ e、 preventDefault；//阻止按钮的默认操作 $this//获取用户单击的元素 .next'.accordion面板'//选择下面的面板 .not'：已设置动画'//如果当前未设置动画 .slideToggle；//使用幻灯片切换来显示或隐藏它 }; $'.tab list'.eachfunction{//查找选项卡列表 var$this=$this；//存储此列表 var$tab=$this.find'li.active'；//获取活动列表项 var$link=$tab.find'a'；//从活动选项卡获取链接 var$panel=$$link.attr'href'；//获取活动面板 $this.on'click'，'.tab control'，函数{//When click on a tab e、 preventDefault；//防止链接行为 var$link=$this，//存储当前链接 id=this.hash；//获取已单击选项卡的href 如果id&&！$link.is'.active'{//如果当前未激活 $panel.removeClass'active'；//使面板处于非活动状态 $tab.removeClass'active'；//使选项卡处于非活动状态 $panel=$id.addClass'active'；//激活新面板 $tab=$link.parent.addClass'active'；//激活新选项卡 } }; }; 当我点击来自不同手风琴元素的不同链接时，内容显示在上一个链接的下方

/**********手风琴**********/ .手风琴，.菜单{ 背景色：F2F2； 颜色：666； 保证金：0； 填充：0； 溢出：自动；} 李国章{ 填充：0； 列表样式类型：无；} .手风琴控制{ 背景色：rgba0,0,0,0； 颜色：红色； 显示：块； 宽度：100%； 填充：0.5em 0.5em 0.5em 0.7em； 保证金：0； } .手风琴面板{ 显示：无； } .手风琴面板p{ 利润率：20px； } .手风琴面板img{ 显示：块； 清除：左； } /***************面板***************/ .选项卡面板{ 显示：无； } .tab-panel.active{ 显示：块； } 如何使以前的内容消失

      <ul class="accordion">
        <li class="active"><a class="tab-control" href="#tab-0">Misc Features</a></li>
        <li>
          <button class="accordion-control">Armory</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-1">S grade</a></li>
              <li><a class="tab-control" href="#tab-2">A grade</a></li>
              <li><a class="tab-control" href="#tab-3">B grade</a></li>
              <li><a class="tab-control" href="#tab-4">C grade</a></li>
            </ul>
          </div>
        </li>
        <li>
          <button class="accordion-control">Weaponry</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-5">Special Ability</a></li>
            </ul>
          </div>
        </li>
        <li>
          <button class="accordion-control">Jewelry</button>
          <div class="accordion-panel">
            <ul class="tab-list">
              <li><a class="tab-control" href="#tab-6">Raid Boss Jewelry</a></li>
            </ul>
          </div>
        </li>
      </ul>


        <div class="content"> <!-- Content -->
      <div class="tab-panel active" id="tab-0">misc features</div>
            <div class="tab-panel" id="tab-1">armor S</div>
            <div class="tab-panel" id="tab-2">armor A</div>
            <div class="tab-panel" id="tab-3">armor B</div>
            <div class="tab-panel" id="tab-4">armor C</div>
            <div class="tab-panel" id="tab-5">weapon SA</div>
            <div class="tab-panel" id="tab-6">RB jewelry</div>
        </div>

---

以下是如何做到这一点：

$('.accordion .accordion-panel').not(this).slideUp();
$(this)                                  // Get the element the user clicked on
    .next('.accordion-panel')            // Select following panel 
    .not(':animated')                    // If it is not currently animating
    .slideToggle();                      // Use slide toggle to show or hide it

这是你的电话号码

---

参考资料：

谢谢您的回答，但这并不能解决问题。以前的内容仍然存在。新的内容出现在它下面