![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
jQueryについて質問なのですが、ずっと調べているのですが答えが見つからずどうかお力を貸してください!
今ホームページを作っていまして、メニュー画面でギャラリーのボタンをクリックすると"animate"を使って横からスーッと写真が出てくるように作りました。しかしもう一度ギャラリーボタンを押すと更に横に動いてしまうため、"one"clickで一度だけ実行する処理にしました(これしかやり方が分からなかったので。。)
とりあえずここまではいいのですが、この時に例えばプロフィールボタンを押したときに今出ている写真を引っ込めてプロフィールを出すことは出来るのですが、またギャラリーボタンを押したときに"one"にしているため動きません。
そこでお聞きしたいのですが、この"one"を解除する方法などはあるのでしょうか?
もしくは他に何か良い方法あれば是非教えてもらいたいです。
色々調べて"bind"、"unbind"をうまく使うのかなと思って試行錯誤やってはいるのですがなかなかうまくいかず。。。
どうしても来週までに仕上げなくてはならなくて是非お力を貸してください!!
No.1ベストアンサー
- 回答日時:
自分でフラグとか設けて制御すればいいんじゃないかな。
以下のサンプルでは右に出しているliには'flag'が立っている。
(上位ULには現在出しているliのjQueryオブジェクトを'current'に記憶している)
<head>
<style type="text/css">
ul,li{
list-style-type:none;
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">
$(function(){
$('#Menu li').click(function(){
if($(this).data('flag')) return;
$(this).animate({marginLeft:'100px'},'slow');
$(this).data('flag',true);
if($(this).parent().data('current')) {
$(this).parent().data('current').animate({marginLeft:'0px'},'fast').data('flag',false);
}
$(this).parent().data('current',$(this));
});
});
</script>
</head>
<body>
<ul id="Menu">
<li>AAAA</li>
<li>BBB</li>
<li>CCCCC</li>
</ul>
</body>
この回答への補足
ご質問に答えてくださってありがとうございます!!
とりあえずギャラリーボタンを押した後の、更にまた押したときに動かないようになったのですが、その後の他のメニューボタンを押したときの解除がうまくいきません。
いまずっと色々とやっていたのですがなかなかうまくいかず。。
僕の場合liそれぞれにclassを振り分けているのですがそういう場合はどうすればよろしいのでしょうか?
このような感じで振り分けています。
<ul>
<li class="homebtn"><a href="#">home</a></li>
<li class="probtn"><a href="#">profile</a></li>
<li class="gallbtn"><a href="#">gallery</a></li>
<li class="blogbtn"><a href="#">blog</a></li>
</ul>
そしてsteel_gray様に教わったのをこのような感じでやってみたのですが。。
//ギャラリーBOX
$(function(){
$("#main_manu li.gallbtn").click(function(){
if($(this).data('flag')) return;
$("#gallery_manu_box li.ind_pho").show(0).animate({left: "+=820px"},1000);
$("#gallery_manu_box li.ita_pho").show(0).animate({left: "+=1080px"},1200);
$(this).data('flag',true);
if($(this).parent().data('current')) {
$("#gallery_manu_box li.ind_pho").hide(0).animate({left: "-=820px"},1000);
$("#gallery_manu_box li.ita_pho").hide(0).animate({left: "-=1080px"},1200);
$(this).data('flag',false);
}
$(this).parent().data('current',$(this)); });
});
これではダメだろうなというはなんとなく見て理解できるのですが、全くほかのやり方が思いつきません。。。
それと、steel_gray様の書かれたサンプルの"this"と言うのは、"#Menu li"のことを指しているのでしょうか?
すみません質問ばかりで。。
やはりjavascriptをちゃんと勉強しなくてはダメですね。。
お時間あればお返事よろしくおねがいします!!
すみません!
まだ解決していないのに終了させてしまいました!
また引き続き投稿させてもらいましたのでよろしければお願いします!!
http://oshiete.goo.ne.jp/qa/6063457.html
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
チェックボックスに入っている...
-
jQueryのeqで最後からn番目以降...
-
javascript(DOM)でIDとテキスト...
-
JavaScriptで、?マークとコロ...
-
JQueryで、liタグの背景に色を...
-
C# ブラウザの自動クリック
-
javascript テキストエリアを1...
-
クリックした<a>タグのみにClas...
-
前回の質問の続き function mov...
-
ラズパイでno module named zbar
-
MAX関数を使ってからLEFT JOIN...
-
Colorboxがうまく設置できません
-
ランダムに画像を表示し、ポッ...
-
bxsliderにて読み込み後に内容...
-
JavaScriptで変更した属性の元...
-
image.onload = .. の後に imag...
-
スクロール可能なチェックボックス
-
クリッカブルマップの一部分だ...
-
WEBページ立ち上げ時に1回のみ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
jQueryのeqで最後からn番目以降...
-
チェックボックスに入っている...
-
「jQuery」アコーディオンメニ...
-
クリックした<a>タグのみにClas...
-
javascriptでEnterキーをtabキ...
-
【JQuery】アコーディオンの入...
-
タブ切り替えの初期表示について
-
どの<li><a> が押されたか判別...
-
jQueryでネスト構造の<li>がク...
-
大量のチェックボックス状態取...
-
フルスクリーンについて・・・
-
jQueryのhide,showで中の要素が...
-
JqueryFileTree.js でフォルダ...
-
アコーディオン自動開閉メニュ...
-
【jQuery】遅延実行(タイムラ...
-
多階層ドロップダウンのスマホ...
-
jQueryで表示する吹き出しdivの...
おすすめ情報