0

我有一个可以展开和折叠的工作切换功能，但是展开时我的列表很长，我想在底部放置一个“关闭”链接以启用折叠，这样我的用户就不必滚动到顶部来点击和折叠。有什么想法可以修改此代码以扩展其功能以达到我的目的吗？

<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>
4

2 回答 2

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。

于 2012-04-13T16:59:22.330 回答
1

如果你toggle()在 formxyz 上使用 event，新的 close 动作会打破原来的规则，因此有时你必须点击 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');
  });
});

​</p>

或检查jsFiddle上的模拟代码。它是可执行的。

于 2012-04-13T17:07:43.637 回答