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 を下部に挿入すると、ユーザーはそれを 2 回クリックして折りたたむ必要があります。ワンクリック ソリューションを希望します。

<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

formxyzでイベントを使用するtoggle()と、新しい閉じるアクションによって元のルールが破られるため、コンテンツを表示するためにformxyzを2回クリックする必要がある場合があります。

したがって、formxyzのアクションでclick()イベントを使用します。fadeToggle()非表示のときにコンテンツが表示されます。

次に、すべての「閉じる」にクラスを追加し、メソッドを使用してその親div（コンテンツparentsdivである必要があります）を見つけてから、非表示にします。

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 に答える
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 は 1 つの要素に使用する必要があります。より多くの要素に同じ id を使用しないでください。

于 2012-04-13T16:59:22.330 に答える