Javascript 在将ajax内容加载到div之前，是否先进行slideToggle检查div是否已打开？

请原谅，我是一名javascript初学者，我需要一些帮助来完成一项可能非常平庸的任务，尽管我在这里搜索了一个解决方案，但没有找到任何适用于我的案例的解决方案

我有三个按钮。单击时，每张幻灯片都会打开一个div层，并将外部html文件中的内容加载到其中

问题是，在您单击其中一个之后，当您单击下一个时，它首先折叠div，然后再加载内容。我想要的是，如果div已经打开，它只需更改div的内容。如果没有，请先打开它

我仍然希望它能够切换，如果你点击同一个链接两次，它就会关闭

我不知道我的解释是否正确，所以这里有一支笔，希望你能明白我的意思：

HTML:

提前谢谢你的帮助

更新了代码笔

如果要对每个“描述”使用相同的HTML元素，则必须跟踪活动选项卡。在这里，我使用变量

tabId

跟踪此状态，并创建了一个函数

onClick

，以防止每个选项卡重复代码

var tabId = null;

function onClick(id, url) {
  if (tabId == id) {
      // We've must have clicked again on the active
      // tab so close description
      $("#description").slideToggle("slow");
      tabId = null;
    } else {
      $("#description").load(url);
      if (tabId == null) {
        // There is no active tab so open description
        $("#description").slideToggle("slow");
      }
      tabId = id;
    }
}

$("#first").click(function(){
  onClick(1, "https://codepen.io/tinat/pen/PKGpQy.html #description1");
});

$("#second").click(function(){
  onClick(2, "https://codepen.io/tinat/pen/PKGpQy.html #description2");
});

$("#third").click(function(){
  onClick(3, "https://codepen.io/tinat/pen/PKGpQy.html #description3");
});

更新代码笔

如果要对每个“描述”使用相同的HTML元素，则必须跟踪活动选项卡。在这里，我使用变量

tabId

跟踪此状态，并创建了一个函数

onClick

，以防止每个选项卡重复代码

var tabId = null;

function onClick(id, url) {
  if (tabId == id) {
      // We've must have clicked again on the active
      // tab so close description
      $("#description").slideToggle("slow");
      tabId = null;
    } else {
      $("#description").load(url);
      if (tabId == null) {
        // There is no active tab so open description
        $("#description").slideToggle("slow");
      }
      tabId = id;
    }
}

$("#first").click(function(){
  onClick(1, "https://codepen.io/tinat/pen/PKGpQy.html #description1");
});

$("#second").click(function(){
  onClick(2, "https://codepen.io/tinat/pen/PKGpQy.html #description2");
});

$("#third").click(function(){
  onClick(3, "https://codepen.io/tinat/pen/PKGpQy.html #description3");
});

---

尝试添加

active

类以识别当前的活动选项卡，您可以检查

active

以确定显示内容或将其向上滑动

html

---

尝试添加

active

类以识别当前的活动选项卡，您可以选中

active

以确定显示内容或将其向上滑动

html

---

我喜欢这两种建议的解决方案。我一定要用一个。感谢堆男孩/女孩：）我喜欢这两个提议的解决方案。我一定要用一个。谢谢堆男孩/女孩：）没问题。如果您的HTML是灵活的，那么我实际上会选择@evelyn ma的解决方案，因为它具有较少的重复性，并且不依赖JSN中的全局变量。如果您的HTML是灵活的，那么我实际上会选择@evelyn ma的解决方案，因为它的重复性较少，并且不依赖JS中的全局变量

var tabId = null;

function onClick(id, url) {
  if (tabId == id) {
      // We've must have clicked again on the active
      // tab so close description
      $("#description").slideToggle("slow");
      tabId = null;
    } else {
      $("#description").load(url);
      if (tabId == null) {
        // There is no active tab so open description
        $("#description").slideToggle("slow");
      }
      tabId = id;
    }
}

$("#first").click(function(){
  onClick(1, "https://codepen.io/tinat/pen/PKGpQy.html #description1");
});

$("#second").click(function(){
  onClick(2, "https://codepen.io/tinat/pen/PKGpQy.html #description2");
});

$("#third").click(function(){
  onClick(3, "https://codepen.io/tinat/pen/PKGpQy.html #description3");
});

    <a class="listen" id="first" href="https://codepen.io/tinat/pen/PKGpQy.html #description1">
         First
    </a>

    <a class="listen" id="second" href="https://codepen.io/tinat/pen/PKGpQy.html #description2">
         Second
     </a>

    <a class="listen" id="third" href="https://codepen.io/tinat/pen/PKGpQy.html #description3">
         Third
     </a>

    <div id="description">
    </div>

    $(".listen").click(function(){
        if(!$(this).hasClass("active")){
        $(this).addClass("active");
        $("#description").slideDown("slow");
        $(this).siblings(".listen").removeClass("active");
            $("#description").load($(this).attr("href"));   
      } else {
        $(this).removeClass("active");
        $("#description").slideUp("slow");
      }
      return false;
      });