おしえて

jQuery効率のよい書き方について

解決済

質問者：newly777
質問日時：2015/10/02 11:24
回答数：2件

宜しくお願いします。

http://shampoo.bloom-pro.net/

上記のサイトの中で用いられている「accordion.js」の効率の良い書き方について教えて下さい。

現状では、記事が変更されるとvar elements = []の配列の個所とswitch($categoryNo)の個所を修正
する必要があります。

効率の良い書き方を教えていただけませんか？

因みにHTMLに対してクラス名の付与等の修正は行えますが、HTMLの構造の変更や各ページのURLのリンク名を修正することは出来ないという制約があります。

お手数をおかけ致しますがお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： DoubtOwl
回答日時：2015/10/02 13:57

下記ではどうでしょうか。

var elements = []　→削除
~~
$('.accordion li a').each(function(){
$href = $(this).attr('href');
if(location.href.match($href)) {
//カレントページの強調を制御
$(this).addClass('active');

$(this).parent().parent().parent().show();

- 0
- 件

通報する

この回答へのお礼

DoubtOwl様

早々にご回答を頂きましてありがとうございます。

$(this).parent().parent().parent().show();

上記の1行で無事に解決致しました。
お蔭様で大幅にソースの見通しが良くなると共にメンテナンスの向上につながりました。

お世話になりました。

通報する

お礼日時：2015/10/02 14:51

参考程度に

No.2

回答者： fujillin
回答日時：2015/10/02 14:36

スクリプトをちゃんと見ていませんが、サイドメニューのアコーディオン動作を項目の数などに影響されずに記述したいということでしょうか？

勝手なイメージでご提示のサイトとは関係なく記述したので、動作が若干異なるかもしれませんが、こんなのでは？
※　構造は変わらないということなので、基本的にそのままです。
※　スクリプトで必要とするid等は、包含要素のclass="acoordion"のみです。
※　CSSはテストのための最小限でいい加減なので、作り直してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.accordion, .accordion *{ padding: 0; margin: 0; }
.accordion ul, .accordion li { list-style-type: none; }
.accordion dt, .accordion ul li { width:250px; height:50px; border:1px solid #8AC; }

.accordion>dt { background-color: #8DE; }
.accordion dl dt { color:#FFF; background-color: #8AC; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi" ></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function(){
$(".accordion dl>dt").click(function(){
$(this).next("dd").slideToggle();
}).next("dd").hide();
});
</script>
</head>
<body>

<dl class="accordion">
<dt><img src="hoeg.gif" width="250" height="50" alt="シャンプー"></dt>

<dd>
<dl>
<dt>シャンプーについて</dt>
<dd>
<ul>
<li><a href="#">おすすめシャンプー、</a></li>
<li><a href="#">たまにはシャンプーも香りで選んでみませんか？</a></li>
</ul>
</dd>
</dl>
</dd>

<dd>
<dl>
<dt>ノンシリコンシャンプー</dt>
<dd>
<ul>
<li><a href="#">今だから知りたいノンシリコンシャンプーのあれこれ!?</a></li>
<li><a href="#">ノンシリコンシャンプーとその効果まとめ</a></li>
<li><a href="#">ノンシリコンシャンプーと髪の関係</a></li>
<li><a href="#">ノンシリコンシャンプーできしみや枝毛などに効果はあるのか？疑問に迫る</a></li>
<li><a href="#">ノンシリコンシャンプーの各種メリット</a></li>
</ul>
</dd>
</dl>
</dd>

<dd>
<dl>
<dt>トリートメント</dt>
<dd>
<ul>
<li><a href="#">トリートメントの使い方と効果</a></li>
<li><a href="#">トリートメントの正しい知識を身につけ、美しく健康な髪の毛に！</a></li>
<li><a href="#">トリートメントを選ぶ理由</a></li>
<li><a href="#">トリートメントで髪を変える!!</a></li>
</ul>
</dd>
</dl>
</dd>

<dd>
<dl>
<dt>アミノ酸シャンプー</dt>
<dd>
<ul>
<li><a href="#">アミノ酸シャンプーの効果と正しい使い方</a></li>
<li><a href="#">各種の頭髪・頭皮トラブルに対するアミノ酸シャンプーの効果</a></li>
<li><a href="#">薄毛や育毛に効果的なアミノ酸シャンプーで髪の悩みから解放！</a></li>
<li><a href="#">乾燥肌、きしみ、くせ毛のトラブルにも効果的なアミノ酸シャンプー選び</a></li>
</ul>
</dd>
</dl>
</dd>

</dl>

</body>
</html>