让 slideToggle 在加载 ajax 内容之前检查 div 是否已经打开？

Question

对不起，我是一个 javascript 初学者，我需要一些帮助来完成一项可能真的很平庸的任务，尽管我已经在这里搜索了一个解决方案，但没有找到任何我可以应用的解决方案以我为例。

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

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

而且我仍然希望它可以切换，如果您单击相同的 link 两次，它就会关闭。

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

HTML:

<a id="first" href="javascript:void;">
  First
</a>

<a id="second" href="javascript:void;">
  Second
</a>

<a id="third" href="javascript:void;">
  Third
</a>

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

JS:

$("#first").click(function(){
    $("#description").slideToggle("slow");
    $("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description1");
});

$("#second").click(function(){
    $("#description").slideToggle("slow");
    $("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description2");
});

$("#third").click(function(){
    $("#description").slideToggle("slow");
    $("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description3");
});

提前感谢您的帮助！

Answer 1

更新了 CodePen here。

如果要为每个 "description" 使用相同的 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");
});

Answer 2

尝试添加 active class 识别当前活动标签，您可以勾选 active 确定显示内容或向上滑动。

html

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

js

    $(".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;
      });

https://jsfiddle.net/zt11vkz6/

让 slideToggle 在加载 ajax 内容之前检查 div 是否已经打开？

Make slideToggle check if div is already open, before loading ajax content into it?

javascript

ajax

jquery

load

toggle