0

编辑：我已经包含了包含样式和脚本的完整 HTML，因为它出现在我的 html 文件中。

我想让我的文章的一部分折叠并提供“显示更多内容...”链接。单击后，会显示全部内容，任何其他打开的文章都会折叠，并且会显示“隐藏内容”链接。这是我正在使用的 javascript 代码。正是在此之前，我还有脚本 src 指向 googleapi jQuery 1.9.1。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var slideHeight = 75;
$(".container").each(function () {
    var $this = $(this);
    var $wrap = $this.children(".wrap");
    var defHeight = $wrap.height();
    if (defHeight >= slideHeight) {
        var $readMore = $this.find(".read-more");
        $wrap.css("height", slideHeight + "px");
        $readMore.append("<a href='#'>Click to Read More</a>");
        $readMore.children("a").bind("click", function (event) {
            var curHeight = $wrap.height();
            if (curHeight == slideHeight) {
                $wrap.animate({
                    height: defHeight
                }, "normal");
                $(this).text("Close");
                $wrap.children(".gradient").fadeOut();
            } else {
                $wrap.animate({
                    height: slideHeight
                }, "normal");
                $(this).text("Click to Read More");
                $wrap.children(".gradient").fadeIn();
            }
            return false;
        });
    }
});
</script>
<style>
.wrap {
    position: relative;
    overflow: hidden;
    padding: 10px;
}
.gradient {
    width: 100%;
    height: 35px;
    background: url(http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide/images/bg-gradient.png) repeat-x;
    position: absolute;
    bottom: 0;
    left: 0;
}
.read-more {
    border-top: 4px double #ddd;
    background: #fff;
    color: #333;
    padding: 5px;
}
.read-more a {
    padding-right: 22px;
    background: url(http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide/images/icon-arrow.gif) no-repeat 100% 50%;
    font-weight: 700;
    text-decoration: none;
}
.read-more a:hover {
    color: #f00;
}
</style>
</head>
<body>
<div class="gridContainer clearfix">
  <div id="content">
    <div id="header">
      <h1>Header Text</h1>
    </div>
    <div id="nav">
      <ul>
        <li>Nav Text</li>
      </ul>
    </div>
    <div id="copy">
      <div class="blPost">
        <div class="container">
          <h2 class="blTitle">Blog Post Title</h2>
          <div class="wrap">
            <div>
              <p class="blArticle">Blog text goes here....</p>
              <p class="blArticle">Blog text goes here....</p>
              <p class="blArticle">Blog text goes here....</p>
              <p class="blArticle">Blog text goes here....</p>
              <p class="blArticle">Blog text goes here....</p>
              <p class="blArticle">Blog text goes here....</p>
              <p class="blArticle">Blog text goes here....</p>
              <p class="blArticle">Blog text goes here....</p>
            </div>
            <div class="gradient"></div>
          </div>
          <div class="read-more"></div>
        </div>
      </div>
      <div id="footer">
        <p>Footer Text</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
4

1 回答 1

0

我无法重现您报告的错误消息。

但是，代码似乎不会运行，因为container在将任何此类元素添加到文档之前，您正在循环遍历作为该类成员的每个元素。

移动 ，<script>使其出现在之前，</body>或者将您的代码包装在您传递给的函数中jQuery(document).ready(your_function)。

于 2013-09-07T08:07:16.170 回答