sụp đổ fieldset khi yếu tố huyền thoại nhấp

Question

Tôi đã một hàm jQuery mà Toggles khả năng hiển thị các nội dung của một fieldset khi huyền thoại của nó được nhấp, để lại chỉ là biên giới fieldset (nếu có) và truyền thuyết cho thấy:

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

Nó hoạt động tốt trừ khi trường có chứa các nút văn bản.

<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> 

Trong một nỗ lực để chuyển đổi văn bản các nút quá Tôi cố gắng này:

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

mà hoạt động giống như chức năng đầu tiên. Và điều này:

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

mà ném lỗi

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 

Bất kỳ suy nghĩ về cách để có được những toàn bộ nội dung của một fieldset (trừ huyền thoại) để chuyển đổi khi truyền thuyết được nhấp?

ETA Solution, với nhiều nhờ 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

Bạn chỉ đơn giản là không thể làm cho văn bản biến mất trong HTML, JavaScript hoặc CSS. Nó cần phải được chứa trong một phần tử HTML sẽ được áp dụng display:none; hoặc tương tự.

Đoạn mã sau sẽ bao bọc mọi thứ vào một div và di chuyển chú giải của bạn đến cùng cấp với div và hiển thị div/ẩn khi bạn nhấp vào chú giải.

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

• Code: http://jsbin.com/eleva3/edit
• Preview: http://jsbin.com/eleva3

Answer 2

Sử dụng một thẻ div để tách các nội dung, một cái gì đó như:

<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> 

Sau đó, bạn chỉ cần bật tắt div.

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

Cập nhật chỉ trong trường hợp bạn không thể chỉnh sửa HTML bạn có thể làm sau nhưng nó sẽ chỉ làm việc nếu tất cả các văn bản nằm trong ít nhất một thẻ:

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

trực tuyến bản demo tại đây:http://jsfiddle.net/yv6zB/1/

Answer 3

Có thể bạn chỉ cần đính kèm văn bản của mình vào thẻ 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

Vì nút văn bản không phải là phần tử nên không có cách nào để chuyển đổi chúng.

Như một phương sách cuối cùng, nếu bạn không có thể bọc chúng bằng một phần tử, bạn có thể loại bỏ tất cả mọi thứ ngoại trừ huyền thoại và thêm các yếu tố và các văn bản các nút quay lại sau:

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

Bạn có thể kiểm tra rằng giải pháp here.

Answer 5

Tôi thích câu trả lời được chấp nhận, nhưng không tìm thấy nó mạnh mẽ đủ cho mục đích của tôi. Chỉ cần kiểm tra độ dài của số phần tử con không hỗ trợ nhiều kịch bản. Do đó, tôi sẽ xem xét sử dụng triển khai tương tự như:

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