崩壊のフィールドセット

Question

私はフィールドセットの境界線を残し、その伝説がクリックされるフィールドセットの内容の表示を切り替えますjQueryの関数は、凡例は表示している：

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

フィールドセットにテキストノードが含まれていないとうまくいきません。最初の関数と同じように動作します

$('legend.togvis').click(function() { 
    $(this).parent().contents().not('legend').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; 
}); 

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> 
    <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を切り替える必要があります。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にラップし、凡例を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タグには多くのおかげで

ETAソリューションは、のようなものを内容を分離します。

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