Javascriptでパラメータを取得して条件判定したいです。

Question

初心者です。

以下のアコーディオンメニュー**（各ページのサイドに設置）**を、リンクをクリックした時に、リンク先でURLに特定のパラメータを付与して、クリックしたグループのものだけ開いている（メニューが開いている）状態にしたいです。
（例、menu1-1をクリック後、category1はリンク先で開いたまま。他のcategoryは閉じている。）

カテゴリー１（リンクメニュー数：３）、カテゴリー２（リンクメニュー数：１８）
カテゴリー３（リンクメニュー数：６）、カテゴリー４（リンクメニュー数：３）
カテゴリー５（リンクメニュー数：５）、カテゴリー６（リンクメニュー数：３）
カテゴリー７（リンクメニュー数：２）、カテゴリー８（リンクメニュー数：１８）です。

カテゴリー毎にパラメータの数を変えて付与し、
URLで「?menu=1」～「?menu=8」が表示されているのは確認できました。

URLのパラメータを取得し、条件判定して状況に応じて該当のメニューにクラスを付与してオープン状態にしておく為のコードを教えていただけますでしょうか。

**※試しにパラメータを取得し、値が１の場合にクラスを付与してみましたが、リンク先でカテゴリー１のメニューは閉じたままでした。
**

返信遅くなり大変申し訳ございませんでした。

（例）
<ul> 
<li> 
<div class="category">category1</div> 
<ul class="fxmn"> 
<li><a href="http://www.com/11?menu=1">menu 1-1</a></li> 
<li><a href="http://www.com/12?menu=1">menu 1-2</a></li> 
<li><a href="http://www.com/13?menu=1">menu 1-3</a></li> 
</ul> 
</li> 
<li> 
<div class="category">category2</div> 
<ul class="fxmn"> 
<li><a href="http://www.com/21?menu=2">menu 2-1</a></li> 
<li><a href="http://www.com/22?menu=2">menu 2-2</a></li> 
<li><a href="http://www.com/23?menu=2">menu 2-3</a></li> 
</ul> 
</li> 
<li> 
<div class="category">category3</div> 
<ul class="fxmn"> 
<li><a href="http://www.com/31?menu=3">menu 3-1</a></li> 
<li><a href="http://www.com/32?menu=3">menu 3-2</a></li> 
<li><a href="http://www.com/33?menu=3">menu 3-3</a></li> 
</ul> 
</li> 
</ul> 

$(function(){ 
    $("ul.fxmn").hide(); 
    $("div.category").click(function(){ 
      $("ul.fxmn").slideUp(); 
      if($("+ul",this).css("display")=="none"){ 
        $("+ul",this).slideDown(); 
      } 
    }); 
  });
var param = getParam('menu'); //
if (param == 1) {
  menu.classList.add('is-menuOpen');
}

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[Lhankor_Mhy]

リンク先がそれぞれ別ドメインになっているようですが、それらのサイト群は質問者が管理しているものですか？

[Lhankor_Mhy]

変数 menu には何が入っていますか？ また、getParam関数が定義されている部分のコードをご提示ください。

Answer 1

やるべき事は

1. URLの取得
2. parameterの分析
3. 分析したパラメータをメニューから探す
4. メニューを動かす

ですかね

理解したかちょっと自信ないですが、だいたいこういう感じではないでしょうか

<ul> 
	<li> 
		<div class="category">category1</div> 
		<ul class="fxmn"> 
			<li><a href="http://www.11?menu=1">menu 1-1</a></li> 
			<li><a href="http://www.12?menu=1">menu 1-2</a></li> 
			<li><a href="http://www.13?menu=1">menu 1-3</a></li> 
		</ul> 
	</li> 
	<li> 
		<div class="category">category2</div> 
		<ul class="fxmn"> 
			<li><a href="http://www.21?menu=2">menu 2-1</a></li> 
			<li><a href="http://www.22?menu=2">menu 2-2</a></li> 
			<li><a href="http://www.23?menu=2">menu 2-3</a></li> 
		</ul> 
	</li> 
	<li> 
		<div class="category">category3</div> 
		<ul class="fxmn"> 
			<li><a href="http://www.31?menu=3">menu 3-1</a></li> 
			<li><a href="http://www.32?menu=3">menu 3-2</a></li> 
			<li><a href="http://www.33?menu=3">menu 3-3</a></li> 
		</ul> 
	</li> 
</ul> 

<button onclick="javascript:doIt('http://www.11?menu=1')" >example URL : http://www.11?menu=1</button> <br>
<button onclick="javascript:doIt('http://www.12?menu=1')" >example URL : http://www.12?menu=1</button><br>
<button onclick="javascript:doIt('http://www.13?menu=1')" >example URL : http://www.13?menu=1</button><br>
<button onclick="javascript:doIt('http://www.21?menu=2')" >example URL : http://www.21?menu=2</button><br>
<button onclick="javascript:doIt('http://www.22?menu=2')" >example URL : http://www.22?menu=2</button><br>
<button onclick="javascript:doIt('http://www.23?menu=2')" >example URL : http://www.23?menu=2</button><br>
<button onclick="javascript:doIt('http://www.31?menu=3')" >example URL : http://www.31?menu=3</button><br>
<button onclick="javascript:doIt('http://www.32?menu=3')" >example URL : http://www.32?menu=3</button><br>
<button onclick="javascript:doIt('http://www.33?menu=3')" >example URL : http://www.33?menu=3</button>

<script>
$(function(){ 
    $("ul.fxmn").hide(); 
    $("div.category").click(function(){ 
      $("ul.fxmn").slideUp(); 
      if($("+ul",this).css("display")=="none"){ 
        $("+ul",this).slideDown(); 
      } 
    }); 
  });

// URLからパラメータを取得する
function doIt(testurl) { 
	// 参考：https://stackoverflow.com/questions/1314383/how-to-check-if-a-querystring-value-is-present-via-javascript
	var queryString = window.location.href; // URL
	queryString = testurl // my test 

	var paramName = "menu"; // 区別用のパラメータ名
	var parameterValue = getParameterFromUrl(paramName, queryString)

	// a hrefの配列取得。　＊sideEffectがあるかもしれないので、そこは補修しましょう
   	var els = document.querySelectorAll("a[href^='http://']");

   	// menuのリンクを探りながらパラメータが一致するのを検索
	for (var i = 0, l = els.length; i < l; i++) {
 		var el = els[i];
 		// hrefのURLから比較用のパラメータを取得
 		var hrefParamValue = getParameterFromUrl(paramName, el.href)
  		if(parameterValue === hrefParamValue) {
  			$(el).closest('ul').slideDown()
  		} else {
			$(el).closest('ul').slideUp()
  		}
	}
}

// 入力したURLからパラメータを取得
function getParameterFromUrl(paramName, urlString) {
	var params = urlString.substring(urlString.indexOf("?")+1).split('&'); // URLからパラメータ配列分析
	var parameterValue = "";
	for(var i=0; i<params.length; i++){
		var pair=params[i].split('=');
	    if(pair[0] === paramName && pair[1]) {
	    	parameterValue = pair[1]; // 狙ってたパラメータの取得
	    }
	}
	return parameterValue;
}
</script>