पतन fieldset जब कथा तत्व क्लिक

Question

मैं एक jQuery समारोह जो एक fieldset जब इसकी कथा क्लिक किया जाता है की सामग्री की दृश्यता को टॉगल करता है, बस fieldset सीमा छोड़ने (यदि वहाँ एक है) और किंवदंती दिखा दिया है:

$('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 

कैसे एक fieldset (ऋण कथा) जब कथा क्लिक किया जाता है टॉगल करने के लिए की पूरे सामग्री प्राप्त करने के लिए पर कोई विचार?

ईटीए 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, जावास्क्रिप्ट या सीएसएस में टेक्स्ट को गायब नहीं कर सकते हैं। इसे एक HTML तत्व में निहित होना आवश्यक है जिसमें display:none; लागू होगा या कुछ समान होगा।

निम्नलिखित कोड सबकुछ एक div में लपेट जाएगा, और अपनी किंवदंती को div के समान स्तर पर ले जायेगा, और जब आप किंवदंती पर क्लिक करेंगे तो 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

क्या आप बस अपने पाठ को सिबिलिग टैग में संलग्न कर सकते हैं:

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