怎么能切換到崩潰？

Question

我有一個擴展和折疊的工作切換功能，但我的列表在擴展時非常長，我想在底部放置一個“關閉”鏈接以啟用折疊，這樣我的用戶就不必滾動到頂部來點擊和折疊。 有任何想法我如何修改此代碼以擴展它的功能為我的目的？

<script language="javascript">
$(function(){
$(".formname").toggle(function(){
var id=$(this).attr('id');
$("#form"+id).fadeIn('slow');
},function(){
var id=$(this).attr('id');
$("#form"+id).fadeOut('slow');
}); 
});
</script>

我的HTML看起來像：

<ul>
<li><a href="#" id="formxyz" class="formname">My Expanding/Collapsing Data</a></li>
<div style="display:none;">
<ul>
<li>Content</li>
</ul>
</div>
</ul>

如果我在關閉ul之前在底部插入相同的鏈接li，則用戶必須單擊它兩次才能折疊。 我更喜歡單擊解決方案。

<ul>
<li><a href="#" id="formxyz" class="formname">My Expanding/Collapsing Data</a></li>
<div style="display:none;">
<ul>
<li>Content</li>
<li><a href="#" id="formxyz" class="formname">Close</a></li>
</ul>
</div>
</ul>

Answer 1

<li><a href="#" id="xyz" class="formname">My Expanding/Collapsing Data</a></li>
<div style="display:none;">
<ul>
<li>Content</li>
<li><a href="#" id="xyz2" class="formname">Close</a></li>
</ul>
</div>

id應該用於單個元素。 永遠不要使用相同的id來獲得更多元素。

Answer 2

如果在formxyz上使用toggle()事件，則新的關閉操作將破壞原始規則，因此有時您必須單擊formxyz兩次才能顯示內容。

因此，在formxyz上使用帶有fadeToggle()動作的click()事件。 它將在隱藏時顯示內容。

然后在所有“關閉”上添加一個類，使用parents方法找到它的父div（它應該是內容 div），然后隱藏它。

html：

 <div style="background-color: gray">
  <li><a href="#" id="xyz" class="formname">My Expanding/Collapsing Data</a></li>
  <div id="formxyz" class="content" style="display:none">
    <ul>
      <li>Content</li>
      <li><a href="#" class="closeform">Close</a></li>
    </ul>
  </div>​
</div>

js文件：

$(function(){
  $(".formname").click(function(){
    var id=$(this).attr('id');
    $("#form"+id).fadeToggle('slow').focus();
  }); 

  $(".closeform").click(function(){
    $(this).parents("div.content").fadeOut('slow');
  });
});

或者在jsFiddle上檢查模擬代碼。 它是可執行的。