0

こちらがアコーディオンのデモです。フィドルでは正常に動作していますが、コードをhtmlファイルにコピーするとうまくいきません。

ここにHTMLファイルのコードがあります

編集された HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="horizontalaccordion.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>

<body>


<div class="horizontalaccordion">
<ul>
    <li>
        <h3>Heading 1</h3>
        <div>Content For Panel 1.</div>
    </li>
    <li>
        <h3>Heading 2</h3>
        <div>Content For Panel 2.</div>
    </li>
    <li>
        <h3>Heading 3</h3>
        <div>Content For Panel 3.</div>
    </li>
    <li>
        <h3>Heading 4</h3>
        <div>Content For Panel 4</div>
    </li>
</ul>
</div>​ 
<script type="text/javascript">
    $(document).ready(function() {
 $('h3','.horizontalaccordion ul li').on('click',function() {
    $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});​
});
</script>


</body>
</html>
4

2 に答える 2

1

いくつかの行からいくつかの特殊文字を削除すると機能します。vim などの実際のテキスト エディタで html ファイルを開くと、表示されます。vim で<200b>シンボルのようなものが表示されます。それらを削除すると、正常に動作します。

これをコピーするだけです：

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="horizontalaccordion.css"
    type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div class="horizontalaccordion">
      <ul>
        <li>
          <h3>Heading 1</h3>
          <div>Content For Panel 1.</div>
        </li>
        <li>
          <h3>Heading 2</h3>
          <div>Content For Panel 2.</div>
        </li>
        <li>
          <h3>Heading 3</h3>
          <div>Content For Panel 3.</div>
        </li>
        <li>
          <h3>Heading 4</h3>
          <div>Content For Panel 4</div>
        </li>
      </ul>
    </div>

    <script type="text/javascript">
      $(document).ready(function () {
        $('h3', '.horizontalaccordion ul li').on('click', function () {
          $(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
        });
      });
    </script>
  </body>
</html>
于 2012-08-23T09:42:15.467 に答える
0

CSS ファイルが正しく読み込まれていない可能性があります。.css ファイルが .htm ファイルの近くにあることを確認してください。.js ファイルをダウンロードして、src をダウンロードした場所に変更しない場合は. それ以外は特に問題はないと思います

于 2012-08-23T09:46:15.853 に答える