مسج اخفاء مرنة / عرض من مجموعات الحقول

Question

وأريد أن تعزيز بعض مجموعات الحقول مع خيار لإظهار / إخفاء محتوياتها على النقر التسمية الخاصة بهم.

وحاليا، HTML تبدو مثل هذا:

<fieldset>
    <legend>Fieldset 1</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>

وهكذا، على النقر على fieldset legend واحد، أي شيء ولكن أسطورة النقر من مجموعة حقول الأم يجب أن يكون مثبت.

وحاولت استخدام هذا:

$("fieldset *:not(legend)").hide();
$("fieldset legend").click(function(){
    $(this).nextAll().slideToggle();
});

ولكن لا تفعل أي شيء (ولا حتى إخفاء المحتويات في المقام الأول). بالطبع أريد فقط لتبديل العرض على مجموعة حقول جدا قام المستخدم بالنقر فوق، لذلك يجب أن تحدد بطريقة أو بأخرى ما أسطورة تم النقر ثم إخفاء محتويات مجموعات الحقول المقابلة.

وبالتأكيد، بوسعي أن أعطي كل منهم معرفات وكتابة رمز لكل مجموعة حقول، ولكن هذا زائدة بدلا رؤية أنه سيكون دائما هو نفسه أعتقد يجب أن يكون هناك طريقة لجعل هذه الوظيفة العالمية لأي مبلغ من مجموعات الحقول .. .

وأي شخص لديه فكرة أنيق؟

Answer 1

إذا كنت أنت كنت التفاف المحتوى من مجموعة حقول في شعبة، ومثل ذلك:

<script type="text/javascript">
        $(function(){
            $('legend').click(function(){
                $(this).parent().find('.content').slideToggle("slow");
            });
        });
</script>

<fieldset>
    <legend>Fieldset 1</legend>
    <!-- Some input, p, div, whatever -->
    <div class="content">
        this<br />
        is<br />
        content<br />
    </div>
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    <!-- Some input, p, div, whatever -->
    <div class="content">
        this<br />
        is<br />
        content<br />
    </div>
</fieldset>

وحتى الآن عند النقر على التسمية أنه سوف تنزلق محتوى أعلى / أسفل وترك التسمية مرئية.

Answer 2

$(function(){
  $('legend').click(function(){
   $(this).siblings().slideToggle("slow");
  });
});

وهذا يعمل. انها نفس مفهوم حقا، فقط معكوس.

Answer 3

والنسخة الموسعة

وHTML (أسطورة تحتوي [-] مدى):

<fieldset>
    <legend>My Area <span>[-]</span></legend>
    Content of fieldset...
</fieldset>

وجافا سكريبت (يتطلب مسج):

$(function(){
    // Set cursor to pointer and add click function
    $("legend").css("cursor","pointer").click(function(){
        var legend = $(this);
        var value = $(this).children("span").html();
        if(value=="[-]")
            value="[+]";
        else
            value="[-]";
       $(this).siblings().slideToggle("slow", function() { legend.children("span").html(value); } );
    });
});