用jquery顯示/隱藏div多次

我想用jquery從文本鏈接中顯示/隱藏DIV。用jquery顯示/隱藏div多次

是什麼讓它有點不同於我發現的這個網站到目前爲止的例子是我需要一個通用的方式做多次在1頁，也能夠在任何頁面上使用它的網站。

如果我可以把JS放在包含在頁面中的單獨文件中，那真的很不錯，所以也許它可以被包裝成一個函數？

有人可以幫我嗎？爲了使它具有通用性，我可以在其中指定一個顯示/隱藏的ID，例如id =「toggle-hide-1」，只需更改我的網頁中的數字，使其成爲不同的顯示/隱藏區域

我可以使用一個名稱來命名該ID，該名稱將使該功能顯示/隱藏div，並將其與顯示/隱藏在頁面上的其他div分離，我可以爲其添加數字。

下面是部分代碼，它會在鏈接點擊時顯示/隱藏div，但並不完全符合我的需求。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" > 
$(function() { 
    $(".view-code").click(function(evt) { 
     $(".tool_block, .view-code").toggle(); 
    }); 
}); 
</script> 
<a href="#" class="view-code" >view code</a> 
<a href="#" class="view-code" style="display:none">hide code</a> <br /> 

<div class="tool_block" style="display:none" > 
this stuff is hidden until we choose to show it! 
</div>

來源

2009-09-05 JasonDavis

最好的方法可能是使用自定義屬性。如果你使用一個屬性告訴jquery哪個div切換，那麼編寫通用代碼來完成這項工作將更加容易。

事情是這樣的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" > 
$(function() { 
    $(".view-code").click(function(evt) { 
     var d = $(this).attr("toolDiv"); 
     $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle(); 
    }); 
}); 
</script> 
<a href="#" class="view-code" toolDiv="1" >view code</a> 
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br /> 

<div class="tool_block" toolDiv="1" style="display:none" > 
this stuff is hidden until we choose to show it! 
</div>

然後每個錨DIV對賦予一個唯一的toolDiv值（不必是一個數字）。

來源

2009-09-05 20:38:52 Joel

這正是我所需要的！ 1點是當你點擊一個鏈接將＃加載到URL中時，你知道如何取消該部分，因爲如果你向下滾動頁面，頁面會變成最頂層。謝謝 – JasonDavis 2009-09-05 20:58:54

另一件事，你知道是否可以將這個函數包裝到一個函數中，我可以把它放在其他地方的文件中，然後在頁面上用一個班輪調用它，我需要它？ – JasonDavis 2009-09-05 21:00:20

您可以將該腳本塊的內容粘貼到另一個文件中，只要它在jquery庫之後加載，它就可以在任何頁面上正常工作。不需要直接在頁面上寫任何JS。爲了防止錨點的默認行爲，只需將'return false;'添加到點擊處理程序的末尾。 – Joel 2009-09-05 21:05:08

如果你可以換一個DIV全收，這將使它很容易。

$(function() { 
    $(".view-code").click(function(e) { 
     $(this).siblings().andSelf().toggle(); 
    }); 
}); 

<div> 
    <a href="#" class="view-code" >view code</a> 
    <a href="#" class="view-code" style="display:none">hide code</a> <br /> 

    <div class="tool_block" style="display:none" > 
    this stuff is hidden until we choose to show it! 
    </div> 
</div>

如果不處理<br />，你可以過濾姐弟倆只DIV和錨元素。

來源

2009-09-05 20:38:07 tvanfosson

這確實需要anchor和div在標記中有些相關。 – Joel 2009-09-05 20:39:41

只有他們在同一個容器中，但聽起來就像他在做什麼。 – tvanfosson 2009-09-05 20:40:35

我認爲這是一個優雅的解決方案，如果你所做的假設對於OP是真的。 – Joel 2009-09-05 21:14:55

爲什麼不使用特定的類呢？你想顯示的每個元素/隱藏可以有一個名爲「toggler，」類中：

<div class="toggler"> 
... 
</div>

然後，您可以立刻切換這一類的所有元素的可見性，具有：

$(".toggler").toggle();

在這種情況下，它們在文檔中這些元素所處的位置甚至是什麼類型的元素都沒有區別。

如果此功能需要在全球範圍內提供，你可以隨時擴展jQuery的本身具有自定義功能，如：

$.toggleTogglers = function(toggleClass) { 
    $("." + toggleClass).toggle(); 
};

這是那該多好你必須靈活地選擇一個切換自定義類的你自己的設計。

來源

2009-09-05 20:52:24

用jquery顯示/隱藏div多次

回答

相關問題