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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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

解決済

2回答

3291閲覧

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

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オブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿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>タグのクリックイベントは有効という理解だったので何故なのか不思議です。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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(); 確かにこれでできてよさそうですよね
guest

0

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

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


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

投稿2017/05/15 11:32

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問