Question

请原谅我是一名javascript初学者，我需要一些可能真正平庸的任务的帮助，虽然我已经在这里搜索了一个解决方案但没有找到我可以申请的任何内容案件。

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

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

我仍然希望它可以切换，如果你点击两次相同的链接，它就会关闭。

我不知道我是否正确解释了这一点，所以这是一支笔，希望你能看到我的意思：

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

尝试添加active课程以识别当前有效标签，您可以查看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/

Answer 2

更新了CodePen here。

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

在将ajax内容加载到其中之前，使用slideToggle检查div是否已打开？

2 个答案: