使用jQuery滑动特定字段集

我有以下两个字段集的html ..我想为包含..如果任何字段集不包含div标签与id“内容”shud不滑动的fieldset提供toggleSlide功能。如果有人能提供Fiddler，我将不胜感激。使用jQuery滑动特定字段集

的HTML

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Collapse fieldset when legend element clicked</title> 
</head> 
<body> 
    <fieldset><legend>Awesome</legend> 
    <div id="contents"> 
    <p> 
     HELLO THERE 
    </p> 
    <p> 
     Awesome 
    </p> 
    awesome 
    </div> 
    </fieldset> 
    <br> 
    <fieldset><legend>Awesome 2</legend> 
    <p> 
     HELLO THERE 
    </p> 
    <p> 
     Awesome 
    </p> 
    awesome 
    </fieldset> 

</body> 
</html>

脚本

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

来源

2013-05-14 user342944

提琴手？还是jsfiddle？ – 2013-05-14 14:41:27

你可以试试这个： -

我已经改变id="contents"到class="contents"因为ID必须是唯一的，它似乎像正在寻找有多个id="contents"这会使html无效。如果没有，你可以在第一行的点击回调中使用$(this).closest('fieldset').find('#contents').length == 0。

Demo

$("fieldset legend").click(function() { 

    if ($(this).closest('fieldset').find('.contents').length == 0) return; 
    if ($(this).parent().children().length == 2) $(this).siblings().slideToggle("slow"); 
    else { 
     $(this).parent().wrapInner("<div>"); 
     $(this).appendTo($(this).parent().parent()); 
     $(this).parent().find("div").toggle(); 
    } 
});

的Html

<fieldset> 
    <legend>Awesome</legend> 
    <div class="contents"> 
     <p>HELLO THERE</p> 
     <p>Awesome</p>awesome</div> 
</fieldset> 
<br> 
<fieldset> 
    <legend>Awesome 2</legend> 
    <p>HELLO THERE</p> 
    <p>Awesome</p>awesome</fieldset>

来源

2013-05-14 14:41:18 PSL

+1，但我会在点击事件上方执行最接近（'fieldset'）'搜索。 'var f = $（...）。closest（'fieldset'）; f.click（....）;'。 – cgTag 2013-05-14 14:51:14

Superbbbbbbbb谢谢 – user342944 2013-05-15 09:45:25

使用jQuery滑动特定字段集

回答

Demo

的Html

相关问题