アコーディオンとロールアップの共用について

質問

今、あるホームページを作っていて、アコーディオンとロールアップの機能を使用したいと思っています。

ロールアップについては今までも使ったことがあり、以下の2つのスクリプトを使用しています。

○jquery.js　○yuga.js

これに、今回はアコーディオンの機能を使いたいので、以下の3つのスクリプトを組み込んで使おうと思いました。

○accordion.js　○prototype.js　○effects.js

で、以下のようにHTMLソースのHEAD内にスクリプトを読み込む記述をして、動作テストを行ったところ、どちらか片方しか動作しないというトラブルが発生しました。

記述の順番を変えると、どちらかが動作するようです。

例1：ロールアップのみ動作する
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/effects.js"></script>
<script type="text/javascript" src="../js/accordion.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/yuga.js"></script>

例2：アコーディオンのみ動作する
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/yuga.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/effects.js"></script>
<script type="text/javascript" src="../js/accordion.js"></script>

これら2つの機能を同時に使用するにはどうすればいいでしょうか？

回答No.4

fujillin · ベストアンサー

こんばんは

＞<a href="sample.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','sample_on.gif',0)"><img src="sample.gif"></a>
これってスクリプトを利用してるのではないのでしょうか？
MM_swapImgRestore()とMM_swapImage()がどこかにあるはずですけど・・・

中身はわかりませんが、引数を見ているとなんとなくロールオーバーのような気がするのですが、ひょっとして違いますか？
ロールアップだと画面があるところまで連続的にスクロールする感じ。
ロールオーバーだと画像などの上にマウスを乗せると、画像が変わったり、一部に画像を上乗せしたり・・・という感じです。

もしも後者ならば、スクリプトでも、CSSでもサンプルはたくさんありますが、なさりたかったことはこんなことだったりして？
　　http://css-eblog.com/csstechnique/css-2.html
　　http://hac-design.com/css/rollover.html

補足

fujillin様

ロールアップとロールオーバー、同じ効果だと思っていました。
まだまだ素人ですね・・・すみません（-_-；

fujillinさんのおっしゃるとおり、やりたかったの「ロールオーバー」です。
さっそくサンプルを見させていただきました。
こちらの方が簡単に実現できそうですし、
まだ検証はしていませんが、アコーディオンとの併用でも不具合がなさそうです。
今回は、このCSSでロールオーバーさせる方法で作りたいと思います。

とても参考になり、また勉強になりました。
ありがとうございます。

回答No.3

fujillin

#2です。　こんばんは。

＞ロールアップ部分をHTML内部に記述する方法では、～～
ということは、ロールアップを自作されたということでしょうか？
prototypeかjqueryを利用して（利用しなくてもいいですが）別に作ってしまうという案も書こうかと思ったのですが、大変かと思って省略していました。
すでに実現なさっているようなので、それなら話は簡単です。

作成されたスクリプトを外部ファイルにして、他のスクリプトと同様に読み込むようにしておけば、HTML内にコードはでませんし、多少長かろうが影響はありませんので、HTMLの更新の際に混乱することはないでしょう。
　（コード部分だけをテキストファイル化して、○○.ｊｓとしておけばよい）

もっとも、メニュー部分で効果を使用しているのでしょうから、いずれにしろ、（更新時に）変ないじくり方をすればおかしくなってしまいそうですが・・・
それを言ったら、HTMLだって変に修正すればおかしくなるから同じかも。

お礼

fujillin様

何度もご回答いただき、ありがとうございます。

ロールアップ部分は、厳密に言うと自作ではありません。
記述内容はヘッダー部や外部ファイルなどでのJavaScriptは使用せずに、
リンクコード部分に以下のように記述することで実現しています。

<a href="sample.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','sample_on.gif',0)"><img src="sample.gif"></a>

これは、ホームページ作成ソフトDreamweaverで作成できるロールオーバーイメージの作成機能です。

今まで、自分でもパッケージ化されたスクリプト(Jqueryなど）で実現できないかと思い、
いろいろと調べましたが、どうやら共有できるようなものが内容なので、
今回はこの方法で対応したいと思います。

いろいろお手数をおかけしました。
また何かありましたら、ご教授お願いいたします。

回答No.2

fujillin

こんにちは。
単に名称がダブっている程度なら、名前を変更すれば済みますが、少し複雑になるとかなり大変だと想像されます。

ホームページのレイアウトにもよりますが、それぞれが入り組んでレイアウトされているのでなければ、片方を含む一部をIframeなどにしてしまうことで、HTMLを分けてしまえば多分うまくいくのでは？（それぞれに必要なjsのみ読み込む）
パッケージの中身を追いかけたりいじくったりするよりは、こんな対処の方が簡単だと思います。

補足

fujillin様

何度もご回答いただき、ありがとうございます。
レイアウトについては、ヘッダー部に横並びの画像メニュー。
サイドバー部に折りたたみ式のサブメニューをと考えています。
fujillinさんのおっしゃる通り、各パッケージの中身を改造するとなると、
それなりに知識も必要で、かなり難しいかと思います。

ただ、インラインフレームの使用については、
確かに、一番簡単な対処法だと思います。
しかし、フレームの枠サイズが固定されるという使い勝手の悪さや、
個人的な好みの問題から、あまり使用したくないと思っています。

できれば、上記2つの機能が共有できる、
それに変わるパッケージ、または外部JSなどがあればと思っています。

そこまでこだわっている理由は、HTMLの簡素化をして、
HTMLの知識のない人でも、ある程度簡単に更新できるようにしたい為です。
ロールアップ部分をHTML内部に記述する方法では、
アコーディオンもふくめ、両方とも動作することは確認できました。
ただ、やはりコードがかなり長くなってしまい、
これでは、知識のない方はメニュー部分の更新ができなくなる可能性があるので、
できれば避けたいと考えています。

何か、いろいろと難しい質問を出してしまい、申し訳ありません。
本件を解決できる、最善の方法があれば、ご教授ください。

回答No.1

fujillin

内部を見たことがありませんが、それぞれのパッケージで、定義などがバッティングしているってことはありませんか？
試したことはないけれど、後から定義した方が優先されそうな気がします。

補足

fujillin 様
ご回答ありがとうございます。
私もそれぞれのパッケージの中身までは理解しておりません。というか、恥ずかしながらそこまでの知識がありません。
ご指摘の通り、確かに何かがバッティングしていて、後述のスクリプトが優先されているようです。

上記では、少し説明不足だったかもしれません。
ロールアップでは、画像のタグに class="btn" を付加することで動作させています。
また、アコーディオンは、
アコーディオン全体を「id="accordion"」で、
タイトル部に「class="toggle"」内容記載部に「class="content"」を記述して定義しています。

その後も、いろいろ試していますが、未だに解決できません。