wp_list_categories()で親と子のタグがある場合に親だけリンクに飛ばない方法はないか。

wordpressの質問です。wp_list_categories()を使えば、カテゴリ一覧をリンク付きで、表示することができますが、現在開閉式のリストを作っているのですが、リンクは子リストのみにしたいのですが、無理でしょうか。つまり親タグをクリックしてもリンクに飛ばないただの文字みたいにしたいです。リンクに飛ぶと何が問題かというと、今はhoverなので、良いですが、.clickに変えた時に、子リストが表示されずに親のリンク先に飛んでしまいます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>  
<body>

<div class="wrap">
    <ul id="CatList">
        <?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'tag_name', 'show_count' => 0 ) ); ?>
    </ul>
<script>





$(function() { 
  var $sub = $('.children');
  $(".children").hide();
  $('.cat-item-26').hover(
    function(){
      // stop関数を追加
      $sub.stop().eq(0).show();
    },
    function(){
      // stop関数を追加
      $sub.stop().eq(0).hide();
    }
  );
});

$(function() { 
  var $sub = $('.children');
  $(".children").hide();
  $('.cat-item-47').hover(
    function(){
      // stop関数を追加
      $sub.stop().eq(1).show();
    },
    function(){
      // stop関数を追加
      $sub.stop().eq(1).hide();
    }
  );
});

</script>
</div>

</body>
</html>

<!-- リストの構造 -->
<ul>
	<li class="cat-item cat-item-56 current-cat-parent current-cat-ancestor"><a href="" >親1</a>
		<ul class='children'>
			<li class="cat-item cat-item-49 current-cat"><a href="" >子1</a>
			</li>
		</ul>	
	</li>
	
	<li class="cat-item cat-item-55"><a href="" >親２</a>
		<ul class='children'>
			<li class="cat-item cat-item-52"><a href="" >子２</a>
			</li>
		</ul>
	</li>
	
	
	<li class="cat-item cat-item-48"><a href="" >子がない独立したリスト(これはリンクに飛ぶ）</a>
	</li>
</ul>

途中経過１

$(function(){
   $('a').click(function(){
        return false;
    })
});

これを追記すればリンクに飛ばないことは確認出来ました。<ul>を持つ<li>ってどう指定すればいいのか難しくて案あったらお願いします。

途中経過２

$(function(){
   $('li').has('ul').click(function(){
        return false;
    })
});

こうしてみると、親要素も子要素もリンクに飛ばないんですよね。（階層持たないリストは飛びます。）子要素も影響を受けてしまっているんですよね。

【質問１】

.children('a') // 子カテゴリを持つ親カテゴリの a要素（リンク無効にする要素）

回答ありがとうございます。親リストのみリンク無効は実装できました。
.children('a')の部分なのですが、まだ自分の理解が及んでいなく。
子供のリンクを無効にするイメージならわかるのですが、なぜこれで親のリンクを無効にすることができるのでしょうか。

【質問２】
現在はhoverなので、期待した動作ができるのですが、最終的にはclickにしたいです。その場合だと

.on('click', function(){
  return false;
});

の影響を受けてしまっているのか、クリックしてもリストが展開されないという問題が起きてしまいます。何かいい方法がないでしょうか。

【追記】

$(function() { 
  var $sub = $('.children');
  $(".children").hide();
  $('.cat-item-8').click(
    function(){
      // stop関数を追加
      $sub.stop().eq(0).show();
    },
    function(){
      // stop関数を追加
      $sub.stop().eq(0).hide();
    }
  );
});

$(function() { 
  var $sub = $('.children');
  $(".children").hide();
  $('.cat-item-11').click(
    function(){
      // stop関数を追加
      $sub.stop().eq(1).show();
    },
    function(){
      // stop関数を追加
      $sub.stop().eq(1).hide();
    }
  );
});;

$('#CatList > li > ul') // 子カテゴリの ul
.closest('li') // 最も近い親要素を探す（この場合 #CatList の中で ul を持つ li）
.children('a') // 子カテゴリを持つ親カテゴリの a要素（リンク無効にする要素）
.on('click', function(e){
	e.preventDefault();
});

ありがとうございます。質問１は理解できました。質問２の回答を読んで、このようなコードを試してみました。しかし、クリックしても親リストを開閉できなくなりました。<a>タグだけが無効、<li>は有効を期待していましたが、クリックする場所が同じだからなのか、全部のクリックイベントが無効になってしまった感じです。（この辺説明ややこしくてすみません。）ちょっと考えます。<a>タグのクリックイベントは無効になるが、<li>タグのクリックイベントは有効という理解だったので何故なのか不思議です。

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

回答2件

ベストアンサー

先に出ていたイベントキャンセルで対処する方法です。
※一番上の親カテゴリのみをリンク無効にすること前提です・・・。

javascript
1
2$('#CatList > li > ul') // 子カテゴリの ul
3.closest('li') // 最も近い親要素を探す（この場合 #CatList の中で ul を持つ li）
4.children('a') // 子カテゴリを持つ親カテゴリの a要素（リンク無効にする要素）
5.on('click', function(){
6  return false;
7});

子カテゴリを持たない一番上の階層のカテゴリはちゃんとリンク機能します。
多分、もっと良い方法は無数に存在するかと思いますが・・・。

以下追記

【質問1】について

closest('li')は親カテゴリの li タグを返しています。
そこからチェーンメソッドで繋ぎ、children('a')で親カテゴリの子要素である a タグを指定、
親カテゴリの子要素の a タグにクリックイベントを実装する、という流れになっています。

【質問2】について

これは迂闊でした・・・。

javascript
1.on('click', function(e){
2  e.preventDefault();
3});

これでいいかと思います。
※リスト開閉のイベントは li 要素につけてください。

【補足】

<div class="parent">
  <div class="child"></div>
</div>

子要素で発生したイベントは親要素にも伝播します。
上記では、child クラスの要素をクリックすると、
parent クラスのクリックイベントも発生します。

そして、イベント無効の手段として3つあります。

preventDefault();
その要素のイベントを無効にします。
親要素のイベントは発生します。

stopPropagation();
親要素のイベントを無効にします（イベントの伝播を止める）。
子要素のイベントは発生します。

return false;
以降の処理を全て無効にします。
親要素のイベントも発生しません。

投稿2017/05/16 08:41

編集2017/05/18 08:19

rok6

総合スコア241

destrudo

2017/05/18 12:48

e.preventDefault(); 確かにこれでできてよさそうですよね

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

(1)子要素に<ul>タグがある<li>タグを見つける
(2)その<li>タグの子要素にある<a>タグを無効化する

このようなjQueryを組めばいいのではないでしょうか。

参考URL
jQuery、aリンクを無効にする

投稿2017/05/15 11:32

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

wp_list_categories()で親と子のタグがある場合に親だけリンクに飛ばない方法はないか。

関連した質問