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

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

新規登録して質問してみよう
ただいま回答率
86.02%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

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

destrudo
destrudo

総合スコア143

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0グッド

0クリップ

2902閲覧

投稿2017/05/15 11:04

編集2017/05/18 13:09

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="" >親2</a> <ul class='children'> <li class="cat-item cat-item-52"><a href="" >子2</a> </li> </ul> </li> <li class="cat-item cat-item-48"><a href="" >子がない独立したリスト(これはリンクに飛ぶ)</a> </li> </ul>

途中経過1

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

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

途中経過2

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

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

【質問1】

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

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

【質問2】
現在は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(); });

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2017/05/15 11:32依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「過去の低評価」という指摘を受けました。

回答2

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

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

destrudo

2017/05/18 12:48

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

1

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

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


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

投稿2017/05/15 11:32

退会済みユーザー

退会済みユーザー

総合スコア0

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。