Question

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

Answer 1

使用的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
}

滑动效果或其他什么只是锦上添花，你可以google的东西

如何通过jquery在一个页面中显示标题和描述

2 个答案: