0

EDIT : HTML ファイルに表示されるスタイルとスクリプトを含む完全な HTML を含めました。

記事の一部を折りたたんで「もっとコンテンツを表示...」リンクを提供したいと考えています。クリックするとコンテンツ全体が表示され、他の開いている記事はすべて折りたたまれ、代わりに「コンテンツを非表示」リンクが表示されます。これは私が使用しているJavaScriptコードです。これに先立って、googleapi jQuery 1.9.1 を指すスクリプト src もあります。

<!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 に答える