以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます(htmlファイルにコピーすれば動作すると思います)。
ひとまずイメージ通りに完成したのですが、1つ困ったことがあります。それはリンク文字をクリックしたときにトグルが実行されてしまうことです。ページ遷移する間にメニューが一度開閉してしまうので見た目にあまりスマートではありません。
それを修正するためいろいろ試行錯誤したのですが、どうやってもわからなかったので質問いたしました。リンク文字をクリックしたときは、ページ遷移のみでトグルを実行しないようにするにはどのように書けばよいのでしょうか?
また、このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます。この原因が分かる方がいらしたらぜひお教えください。
どうぞよろしくお願いいたします。
<!---------------------------------->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.7.1')</script>
<script type='text/javascript'>
<!--
$(function(){
$('span.tree_a').click(function() {
$(this).next().slideToggle();
}).next().hide();
});
//-->
</script>
<!---------------------------------->
<style type="text/css">
span.tree_a{
width: 100%;
display: block;
}
</style>
<!---------------------------------->
<ul>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span>
<ul>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span>
<ul>
<li><a href='http://www.google.co.jp/'>孫メニュー1</a></li>
</ul>
</li>
</ul>
</li>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span>
<ul>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span>
<ul>
<li><a href='http://www.google.co.jp/'>孫メニュー2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!---------------------------------->
No.1ベストアンサー
- 回答日時:
なんだかとてもわかりづらいUIのような気もしますが…
ご質問のようになさりたければ、
・li要素をクリックした場合に、クリックの対象がa要素でなければ、その子メニューをトグルで開閉
という感じにすればよいのではないでしょうか。
ただし、a要素をwidth100%にしておきながら、その中をクリックしてもブラウザ側の解釈に頼って処理が分かれているというのは、コードと関係ないところで処理が分岐してしまっていて気に食わないので、明示的にli要素とその子要素のa要素を書き分けるようにしています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript">
$(function(){
$('ul>li').click(function(e){
if(e.target.nodeName==="A") return;
$(this).children("ul").slideToggle();
return false;
}).children("ul").hide();
});
</script>
</head>
<body>
<ul>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span>
<ul>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span>
<ul>
<li><a href='http://www.google.co.jp/'>孫メニュー1</a></li>
</ul>
</li>
</ul>
</li>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span>
<ul>
<li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span>
<ul>
<li><a href='http://www.google.co.jp/'>孫メニュー2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
>このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます
当方の環境では、1.7.2にしてみても、旧いIE6でも動作しました。
jQueryのバージョンによってはサポートブラウザの対象が変わったりもしていますが、1.7.1と1.7.2ではあまり違いがなさそうに思います。
リリースノートがこちらにありますので、調べてみてください。
http://blog.jquery.com/2012/03/21/jquery-1-7-2-r …
ご回答ありがとうございます。
イメージ通りに動作しました。
素人作業ですのでわかりづらいUIになっていますが、自分のスキルではこれ以上のものを作成できないので、これからもっとマシなUIにしていこうと思います。
バージョンの件もご回答ありがとうございました。よく確認してみます。
貴重なお時間をお使いいただき、誠にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで、リンクURLの一致を確...
-
【javascript で動的に a タグ...
-
【短い】1つだけ展開/表示/非表...
-
javascriptで教えてください。 ...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
JavaScriptのクッキーによるリ...
-
文字と数字が混在する要素のsor...
-
多階層ドロップダウンのスマホ...
-
どの<li><a> が押されたか判別...
-
javascriptでEnterキーをtabキ...
-
Jquery の slide.toggle で要素...
-
「jQuery」アコーディオンメニ...
-
Jqueryでリストのスクロール
-
javascriptで正規表現の検索が...
-
jquery ドロップダウンメニュー...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
Slick.jsのオプションrtlについて
-
jQueryで同じクラス名のものを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報