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

相關問題