Question

我已经设法提出这个javascript来滑下div。

单击时，它会向上滑动所有内容，然后滑动单击的那个。

问题是当它已经打开时单击相同的标题，导致内容再次向上滑动然后再向下滑动。

如果代码已经显示，那么代码只需要向上滑动它需要什么？

    function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
              $(thelist[i]).slideUp( "slow", function() {});
        }

    //break if the DIV was displayed last!
        var e = document.getElementById(id);
        $( e ).slideDown( "slow", function() {});
    }

Answer 1

您可以测试元素的客户端宽度，以了解它是否可见：

if (document.getElementById(id).clientHeight) return; // already visible

或者，因为你似乎使用jQuery：

if ($(e).is(':visible')) return;

Answer 2

function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
              $(thelist[i]).slideUp( "slow", function() {});
        }

    //break if the DIV was displayed last!
        var e = document.getElementById(id);
        if (e.style.display != "none") {
            $( e ).slideDown( "slow", function() {});
        }
    }

Answer 3

我认为传递给toggle_visiblity的元素属于类alist。因此，您想要向下滑动的元素将首先在for循环期间滑动，然后在循环后再次向下滑动。在循环内添加一个检查，以检查该元素是否可见。如果是，则只进行滑动。这里发生的是，你的元素在循环中被滑动，因为它是列表的一部分，然后在循环后再次滑回。在循环内部，您希望向上滑动alist不属于id类型的元素。

Answer 4

你可以用这样的所有jQuery做得更简单：

function toggle_visibility(id) {
    var newItem = $("#" + id).slideToggle("slow");
    $("[name='alist']").not(newItem).slideUp("slow");
}

这很简单。切换传入的项目并关闭任何已打开的项目。使用jQuery的slideToggle()为您处理切换。

Answer 5

可以写得更简单：

 function toggle_visibility(id) {
     var $e = $(document.getElementById(id));
     if ($e.is(':visible')) return;

     $(".alist").slideUp("slow");
     $e.slideDown("slow");
 }

Javascript - 如果div已经显示，请不要运行代码？

5 个答案: