崩潰字段集時圖例元素點擊

Question

我有切換的被點擊的傳說，當一個字段內容的可見性，只留下字段集邊框jQuery的功能（如果有的話）和傳說顯示：

$('legend.togvis').click(function() { 
    $(this).siblings().toggle(); 
    return false; 
}); 

，除非該字段集包含的文本節點它的偉大工程。

<fieldset><legend class='togvis'>Click Me</legend> 
    <p>I toggle when the legend is clicked.</p> 
    But I'm a recalcitrant text node and refuse to toggle. 
</fieldset> 

在努力切換文本節點過我嘗試這樣做：

$('legend.togvis').click(function() { 
    $(this).parent().contents().not('legend').toggle(); 
    return false; 
}); 

它的工作方式相同的第一個函數。而這個：

$('legend.togvis').click(function() { 
    $(this).parent().contents(":not(legend)").toggle(); 
    return false; 
}); 

這引發錯誤

Message: 'style.display' is null or not an object 
Line: 5557 
Char: 3 
Code: 0 
URI: http://code.jquery.com/jquery-1.4.4.js 

如何讓一個字段（減去傳說），以被點擊的傳說，當切換的整個內容有什麼想法？

ETA解決方案，非常感謝Eibx

$('legend.togvis').click(function() { 
    $(this).parent().contents().filter(
     function() { return this.nodeType == 3; }).wrap('<span></span>');//wrap any stray text nodes 
    $(this).siblings().toggle(); 
}); 

Answer 1

你根本無法在HTML，JavaScript或CSS時文本消失。它需要包含在將display:none;應用或類似的東西一個HTML元素。

下面的代碼將包裝一切都變成一個div，並移動圖例相同水平的股利，使股利顯示/隱藏當你點擊的傳說。

$("fieldset legend").click(function() { 
    if ($(this).parent().children().length == 2) 
    $(this).parent().find("div").toggle(); 
    else 
    { 
    $(this).parent().wrapInner("<div>"); 
    $(this).appendTo($(this).parent().parent()); 
    $(this).parent().find("div").toggle(); 
    } 
}); 

• 代碼：http://jsbin.com/eleva3/edit
• 前瞻：http://jsbin.com/eleva3

Answer 2

使用div標籤來分隔內容是這樣的：

<fieldset> 
    <legend class='togvis'>Click Me</legend> 
    <div class="contents"> 
    <p>I toggle when the legend is clicked.</p> 
    But I'm a recalcitrant text node and refuse to toggle. 
    </div> 
</fieldset> 

然後你只需要切換div。

$('legend.togvis').click(function() { 
    $(this).closest("contents").toggle(); 
    return false; 
}); 

更新 只有在情況下，你不能編輯，你可以做以下的HTML，但如果所有文字都至少有一個標籤內它只會工作：

$('legend.togvis').click(function() { 
    $(this).parents("fieldset").find("*:not('legend')").toggle(); 
    return false; 
}); 

在線在這裏演示：http://jsfiddle.net/yv6zB/1/

Answer 3

可能你只是簡單地將你的文本放入sibilig標籤：

<fieldset><legend class='togvis'>Click Me</legend> 
    <div><p>I toggle when the legend is clicked.</p> 
    But I'm a recalcitrant text node and refuse to toggle.</div> 
</fieldset> 

Answer 4

由於文本節點不是元素，因此無法切換它們。

作爲最後的手段，如果你不能與元素包裝它們，你可以刪除除了傳奇的一切，並添加元素以及後來的文本節點返回：

$(document).ready(function() { 
    $('legend.togvis').click(function() { 
     var $this = $(this); 
     var parent = $this.parent(); 
     var contents = parent.contents().not(this); 
     if (contents.length > 0) { 
      $this.data("contents", contents.remove()); 
     } else { 
      $this.data("contents").appendTo(parent); 
     } 
     return false; 
    }); 
}); 

您可以測試解決方案here。

Answer 5

我喜歡接受的答案，但沒有找到它爲我的目的足夠強大。只是檢查子元素數量的長度不支持許多情況。因此，我會考慮使用類似的實現：

$("fieldset legend").click(function() { 
    var fieldset = $(this).parent(); 
    var isWrappedInDiv = $(fieldset.children()[0]).is('div'); 

    if (isWrappedInDiv) { 
     fieldset.find("div").slideToggle(); 
    } else { 
     fieldset.wrapInner("<div>"); 
     $(this).appendTo($(this).parent().parent()); 
     fieldset.find("div").slideToggle(); 
    } 
});