元々あるデモデータ（http://css-tricks.com/dow

質問

元々あるデモデータ（http://css-tricks.com/downloads/）に変更を加えたいです。
デモ二番目【Grid Accordion】を参考に少しいじっているのですが、なぜだか<a>～</a>のリンクが効きません。具体的には…

オリジナルは、
<dl>
<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

...
</dl>

こういった作り方で、<dd>の中はテキストだけが入っている状態です。
やりたい事は、この<dd>の中に、更に

<ul>
<li><a></a></li>
</ul>

を入れて変更を加えて、最終的に<a>のURLにジャンプさせたいのですが、なぜだかこの<a>のリンクが効かなくなりました。

リンクを正常に効くようにするにはどうすればいいでしょうか？
おそらくセットになっていたinfogrid.jsの一部を変えればいいと思ったのですが、ここで詰まっています。
アドバイスよろしくお願いします。

回答No.1

fujillin · ベストアンサー

ざっとしか見ていませんが…

16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな（正確には親要素がclass="curCol"の）カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。　ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみてください。
このため、他のリンクタグも（親要素がclass="curCol"でないので）一律にキャンセルされてしまっています。

キャンセルしているのは
　e.preventDefault();
の行の部分ですので、それをコメントアウトすればリンクは効くようになりますが、もともとの機能が損なわれてしまいます。

両立させるのなら、（↑）の画像のリンクと他のリンク要素を識別できるようにして（画像リンクだけに共通のclassを与えるとか）、それ以外はキャンセルしないようにすればよろしいかと思います。

きちんと全部を読み取って回答しているわけではありませんので、見落としがあったらご容赦。

お礼

ご回答いただきありがとうございます。
無事解決いたしました。