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

我设法想出了这个JavaScript下滑divs。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() {}); 
    }

来源

2013-12-16 MRC

可以使用$（元素）。是（ '：可见'）和$（元素）。长度> 0找到，如果在div存在 – Gowsikan

为什么如此多混合的jQuery和纯JS在使用jQuery时可以将整个函数分成两行（请参阅我的答案）？ – jfriend00

可以测试元素的客户端宽度要知道，如果它是可见：

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

或者，你似乎使用jQuery：

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

来源

2013-12-16 10:37:19

@ jfriend00由于问题的标题，我认为元素是隐形的。 –

Jquery的代码工作正常。谢谢！ – MRC

@ jfriend00否：如果设置display：none，则元素的客户端宽度为0 –

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() {}); 
     } 
    }

来源

2013-12-16 10:38:26 Praveen

谢谢您的代码。我最初也是这么想的，但似乎并不奏效。 – MRC

我想传递给toggle_visiblity的元素属于alist类。因此，您想要滑动的元素将首先在for循环中向上滑动，然后在循环之后再次滑下。在循环内添加一个检查，以检查元素是否可见。如果是，只能上滑。这里发生的事情是，你的元素在循环过程中被向上滑动，因为它是列表的一部分，然后在循环之后再次滑落。在循环内部，您需要向上滑动不是id类型的alist元素。

来源

2013-12-16 10:39:43

谢谢你，这似乎正在发生。我使用了上面某个人的一些代码来检查是否显示了DIV，如果是，那么它将不会再次向下滚动。 – MRC

您可以与所有的jQuery这样做容易得多了：

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

这是非常简单的。切换传入的项目并关闭其余任何已打开的项目。使用jQuery的slideToggle()来处理你的切换。

来源

2013-12-16 10:41:17 jfriend00

谢谢你的代码。我只是试过这个，但是只能向下滚动div，而且他们之后不会回滚。 – MRC

@ user3012826 - 你是什么意思后滚动备份？如果你想要点击的项目切换，那么你可以使用'slideToggle（）'来代替点击的项目。我已经改变了我的代码以表明这一点。 – jfriend00

可以写简单得多：

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

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

来源

2013-12-16 10:48:56

谢谢。 “if（$ e.is（'：visible'））return;”行需要在“$（”。alist“）之后。slideUp（”slow“）;”虽然。但它很好用。 – MRC

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

回答

相关问题