jQueryスライドメニューの初歩的な質問です

解決済

質問者：misoshio
質問日時：2013/06/14 11:03
回答数：1件

以下のスライドメニューは、それぞれブロック要素で構成されていて、リンク文字や余白をクリックするとスライドトグルで開閉が行われます（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'>

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2013/06/14 12:52

なんだかとてもわかりづらい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 …

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
イメージ通りに動作しました。

素人作業ですのでわかりづらいUIになっていますが、自分のスキルではこれ以上のものを作成できないので、これからもっとマシなUIにしていこうと思います。

バージョンの件もご回答ありがとうございました。よく確認してみます。

貴重なお時間をお使いいただき、誠にありがとうございました。

通報する

お礼日時：2013/06/14 16:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！