1

私はリストのようなFAQのために次のコードを持っています。ユーザーがボタンをクリックすると、情報が下にスライドしてコンテンツが表示されます。次に、同じボタンをクリックしてコンテンツを閉じることができます。

このページには複数のリストがあるので、リストが開いていて、ユーザーが別のリストをクリックして開くと、開いているリストが閉じて、他のリストが開きます。そうすれば、ユーザーは1マイルの長さのスクロールバーを持っていません。

これが私のコードです：

JS

$('.service').live('click',function(){
  $(this).parent().children().toggle();  //swaps the display:none between the two spans
  $(this).parent().parent().find('.content').slideToggle();  //swap the display of the main content with slide action
 });

$('.service').click(function(e) {
  e.preventDefault(); //Prevents link from taking them to top of page
});

HTML

<div class="service-container">
 <div class='service-title'>
  <a href="#" class="service fancy_button"><span style="background-color: #0f071e;"><i class="icon-plus"></i> Open</span></a>
  <a href="#" class="service fancy_button" style="display:none;"><span style="background-color: #666;"><i class="icon-minus"></i> Close</span></a>
  </div>
   <div class='content' style='display:none;'>
      <p>My Content</p>
   </div>
</div>

これを行うためのより良い方法があれば、コードを書き直してもかまいません。

アイデア：

スクリーンショット

4

1 に答える 1

2

live()主に、メソッドは非推奨になっているため、使用しないことをお勧めします。代わりにon()、次の方法でメソッドを使用できます。

$(".service-title").on("click", ".service", function(e) {
    $(this).siblings().andSelf().toggle()
        .parent().siblings(".content").slideToggle();

    e.preventDefault();
});

デモ：http： //jsfiddle.net/bnT6Q/

現在開いているときに他の開いているコンテナを閉じるために、コードを少し書き直すことがあります。

$(".service-title").on("click", ".service", function(e) {
    $(".service-container")
        .has($(".content:visible").add(this))
        .find(".service").toggle().end()
        .find(".content").slideToggle();

    e.preventDefault();
});​

デモ：http： //jsfiddle.net/bnT6Q/1/

于 2012-10-21T23:32:22.460 に答える