如何通过单击带有 slideDown/Up 的按钮将 load/unload 变成 html 到 div

Question

我正在处理 opens/closes 具有 jquery 的 toggle() 功能的大型菜单列表。我希望菜单列表中的其中一项在单击时滑动并显示其下方 div 上另一个 .html 的 load() 内容，然后再次单击时，以slideUp并删除load()内容。

到目前为止我写的代码似乎可以工作，但是，在第二次点击之后，它似乎会 "crazy" 并且混淆了 slideDown 和 Up 的顺序并在循环中重复移动。

由于使用了 load() 方法，所以代码不能在这里运行，但是我把我正在使用的代码放在这里，所以你可以检查逻辑。

$(document).ready(function(){       
    $('.show-project-01').on('click', function(){         

        if ($('.project').html() == "") {   
            $('.project').slideDown()
            $('.project').load('project-01.html')
        } else {
            $('.project').slideUp()
            $('.project').empty()
        }

        return false
            
        }) 
})

<a href="#" class="title-project show-project-01">Pure office <img src="assets/teste-01.jpg" alt="" class="image-01"></a>

<div class="project">
</div>

我是 jquery 的新手，所以我不太明白我做错了什么，欢迎任何建议。

谢谢！

Answer 1

您可以使用数据属性来确保容器 div 是打开还是关闭

var button = $('.show-project-01');
var container = $('.project');  

// add data-open attribute of close
button.attr('data-open','close');
  // on button click
  button.on('click',function() {        

    // get data-open arrtibute 
    var open = $(this).data('open');

    // if data-open is open 
    if(open != 'open'){  
      // update data-open to open
      $(this).data('open','open');
      container.load('project-01.html', function() {
           container.slideDown();
      });     
 } else {
        container.slideUp();
        // do you need to remove the html?
        //container.empty()
        // update data-open to close
        $(this).data('open','close');
    }
});

工作示例 - https://jsfiddle.net/Jim_Miraidev/Lp2r3yqn/

如何通过单击带有 slideDown/Up 的按钮将 load/unload 变成 html 到 div

How to load/unload an html to a div by clicking on a button with slideDown/Up

jquery

html

ajax

slidetoggle