jquery - jquery如何在一页中显示标题和描述

Question

嗨，如何通过 jquery 在同一页面中制作标题和描述。像这个http://www.st-andrews.ac.uk/its/projects/当点击每个项目名称时，描述将在下面打开，然后点击另一个之前打开的 div 将关闭。

Answer 1

工作演示 http://jsfiddle.net/tTD4D/

使用的 API： http: //api.jquery.com/slideToggle/

或者像 Zoltan 提到的那样：http: //jqueryui.com/accordion/

这应该适合您的需要:)

代码

$(".title").click(function() {
    $this = $(this);
    $content = $this.next(".content");
    if (!$content.is(":visible")) {
        $(".content:visible").slideToggle(100);
        $content.slideToggle(500);
    }
});​

Answer 2

以下是基础知识

$('.title').on('click', function() {
   if($(this).hasClass('open')) {
      $(this).removeClass('open');
   } else {
      $('.title').removeClass('open');
      $(this).addClass('open');
   }
});

Html 会是这样的

<div class="title">
  title here to be clicked
  <p class="desc">blah</p>
</div>

CSS可能是这样的

.title p {
   display: none
}

.title.open p {
   display:block
}

滑动效果之类的只是锦上添花，你可以用谷歌搜索