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使用click()事件并执行fadeToggle()操作。它会在隐藏内容时显示内容。

然后在所有“关闭”上添加一个类，使用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上的模拟代码。它是可执行的。

怎么能切换到崩溃？

2 个答案: