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已經顯示，不要運行代碼？

回答

相關問題