※javascriptでURL＝hrefにクラスを付与したい※アコーディオンメニュー使用

こちらのサイトを参考に、現在URLの該当アコーディオンメニューを開いて
URL＝hrefのaタグにactionのクラスを追加したいのですが
該当のアコーディオンは開けても、クラスの付与がどうもうまくいきません。
どうぞ宜しくお願い致します。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link href="../css/menu.css" type="text/css" rel="stylesheet" />
6<script src="../js/jquery.js"></script>
7<script src="../js/menu.js"></script>
8</head>
9<body>
10
11<div>
12<p>----- PAGE 11-----</p>
13</div>
14<p>----- SIDE MENU-----</p>
15
16<ul class="sidemenu"> 
17<li> 
18<div class="category">category1</div> 
19<ul class="fxmn"> 
20<li><a href="/menu/01/11.html#step01">menu 1-1</a></li> 
21<li><a href="/menu/01/12.html">menu 1-2</a></li> 
22<li><a href="/menu/01/13.html">menu 1-3</a></li> 
23</ul> 
24</li> 
25<li> 
26<div class="category">category2</div> 
27<ul class="fxmn"> 
28<li><a href="/menu/02/21.html">menu 2-1</a></li> 
29<li><a href="/menu/02/22.html#step02">menu 2-2</a></li> 
30<li><a href="/menu/02/23.html">menu 2-3</a></li> 
31</ul> 
32</li> 
33<li> 
34<div class="category">category3</div> 
35<ul class="fxmn"> 
36<li><a href="/menu/03/31.html">menu 3-1</a></li> 
37<li><a href="/menu/03/32.html">menu 3-2</a></li> 
38<li><a href="/menu/03/33.html#step03">menu 3-3</a></li> 
39</ul> 
40</li> 
41</ul> </body>
42</html>

css
1.category { 
2    line-height:35px; 
3    cursor:pointer; 
4    padding-left: 24px; 
5    background-color:#ededed; 
6    color:#333333; 
7    border-top:solid 1px #ffffff; 
8} 
9
10ul.fxmn li a{ 
11    height: 35px; 
12    display:block;     
13    color:#000; 
14} 
15
16ul.fxmn li{ 
17    border-bottom:solid 1px #ededed; 
18    line-height:35px; 
19    padding-left: 31px; 
20}
21.active { 
22    color:#fff; 
23    background-color:#000; 
24}

js
1var currentPath = location.pathname.split("/");
2var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1];
3targetHref = targetHref.split("index.html")[0]; //一応
4targetHref = targetHref + location.hash;
5document.write("<p>" + targetHref + "</p>");
6
7navList = $(".sidemenu").find("a");
8navList.each(function(){
9  var myhref = $(this).attr("href");
10  $document.write("<p>" + myhref + "</p>");
11  if( myhref === targetHref ) {
12    $(this).addClass("active");    
13  }
14} );
15
16$(function(){
17$('ul.fxmn:not(:has(a[href="' + targetHref +'"]))').hide();
18$("div.category").click(function(){ openMenu(this) });
19});
20function openMenu(category) {
21$("ul.fxmn").slideUp();
22$(category).next().slideDown();
23}

m.ts10806

2018/05/16 20:48

「うまくいかない」だけでは何が起きているのか伝わりませんので、起きている現象、「なぜ提示のコードでうまくいっていないと判断したか」など具体的に記述してください。

行動規範の内容に同意します

回答3件

URL＝hrefのaタグにactionのクラスを追加

activeのclassを付加するのではないのですか？

<div class="category">にではなくaタグにするのでしょうか？アコーディオンが閉じていて、開くとaタグにclassを付加するなら最初からaタグにスタティックにclassを書いてやるだけでは？

なにをどうするとどうなることを期待しているか明示したほうがよさそうです

javascript
1$(function(){
2  $('.sidemenu .fxmn').hide();
3  $('.sidemenu .category').on('click',function(){
4    $(this).siblings('.fxmn').slideDown();
5    $(this).closest('li').siblings().find('.fxmn').slideUp();
6  });
7});

HTML
1<div>
2<ul class="sidemenu"> 
3<li> 
4<div class="category">category1</div> 
5<ul class="fxmn"> 
6<li><a href="/menu/01/11.html#step01">menu 1-1</a></li> 
7<li><a href="/menu/01/12.html">menu 1-2</a></li> 
8<li><a href="/menu/01/13.html">menu 1-3</a></li> 
9</ul> 
10</li> 
11<li> 
12<div class="category">category2</div> 
13<ul class="fxmn"> 
14<li><a href="/menu/02/21.html">menu 2-1</a></li> 
15<li><a href="/menu/02/22.html#step02">menu 2-2</a></li> 
16<li><a href="/menu/02/23.html">menu 2-3</a></li> 
17</ul> 
18</li> 
19<li> 
20<div class="category">category3</div> 
21<ul class="fxmn"> 
22<li><a href="/menu/03/31.html">menu 3-1</a></li> 
23<li><a href="/menu/03/32.html">menu 3-2</a></li> 
24<li><a href="/menu/03/33.html#step03">menu 3-3</a></li> 
25</ul> 
26</li> 
27</ul>

投稿2018/05/17 00:37

yambejp

総合スコア114839

mamasan666

2018/05/21 15:53

お返事が遅れましてすいません！ ▼以下はインクルードで、全ページ同じソースにしたいので動的にしたい意図があります。 <p>----- SIDE MENU-----</p> ▼url(アンカー含む）で一致したら、li にクラスを付与したい。 <li><a href="/menu/01/11.html#step01">menu 1-1</a></li> ↓ <li class="active"><a href="/menu/01/11.html#step01">menu 1-1</a></li> サンプルや説明がわかりにくいので、一度考え直してもう一度質問を投げなおします。この度はありがとうございました。

行動規範の内容に同意します

さらなる問題が発生しましたが、

$(window).load(function () {

var currentPath = location.pathname.split("/");
var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1];
targetHref = targetHref.split("index.html")[0];
targetHref = targetHref + location.hash;
console.log(targetHref);

$(function(){
	$('ul.fxmn:not(:has(a[href="' + targetHref +'"]))').hide();
	$("div.category").click(function(){ openMenu(this) });
});

function openMenu(category) {
	$("ul.fxmn").slideUp();
	$(category).next().slideDown();
}

$('.sidemenu').find('a').each(function () {
	if (targetHref == $(this).attr('href')) {
	$(this).parent('li').addClass('current');
	}
});

});

投稿2018/05/21 15:58

mamasan666

総合スコア7

ベストアンサー

記載のjavascriptのコードでうまくいかなさそうな場所を書いてみます。

javascript
1var currentPath = location.pathname.split("/");
2var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1];
3targetHref = targetHref.split("index.html")[0]; //一応
4targetHref = targetHref + location.hash;
5document.write("<p>" + targetHref + "</p>");
6
7navList = $(".sidemenu").find("a");
8navList.each(function(){
9  var myhref = $(this).attr("href");
10  $document.write("<p>" + myhref + "</p>");
11  if( myhref === targetHref ) {
12    $(this).addClass("active");    
13  }
14} );
15

この部分は、$(function(){ });　の中に居ないです。
なので、jsファイルが読み込まれたら即実行されます。

処理の実行順序を考えると、

javascript
1var currentPath = location.pathname.split("/");
2var targetHref = "/" + currentPath[currentPath.length - 3] + "/" + currentPath[currentPath.length - 2] + "/" + currentPath[currentPath.length - 1];
3targetHref = targetHref.split("index.html")[0]; //一応
4targetHref = targetHref + location.hash;
5document.write("<p>" + targetHref + "</p>");

この、今のURLをごにょごにょしている部分は問題なく動作しそうですが、

javascript
1navList = $(".sidemenu").find("a");

ここで、$(".sidemenu") も、その中の　a　も見つけられていないのではないかと思われます。
できればすべて、$(function(){ });　の中に入っていた方が良さそうですね。

ちなみに、
navList　はいきなり登場する変数に見えますが、これより前の部分で宣言済みなのでしょうか・・？

投稿2018/05/17 00:53

mix-peach

総合スコア1910

mamasan666

2018/05/21 15:55

お返事が遅れましてすいません！ご指摘いただき、色々勉強になりました。サンプルや説明がわかりにくいので、一度考え直してもう一度質問を投げなおします。この度はありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

※javascriptでURL＝hrefにクラスを付与したい※アコーディオンメニュー使用

関連した質問