人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript jquery について

下記のようにすると開閉できるのですが、

$(function(){
$("#hoge").toggle(function(){
$("#foo").slideUp("normal");
},
function(){
$("#foo").slideDown("normal");
})
})

#hoge 以外をクリックした時に
強制的に slideUp した状態にするにはどうすれば良いのでしょうか。

強引に下記のようにするとそうはできるのですが、
<div onclick="$('#foo').slideUp('normal')">

slideDown している状態でこれをやってしまうと、
次に #hoge をクリックして slideDown しようとしても
元々 slideDown している状態と判断されてしまうせいか
2回クリックしないと slideDown させられません。

これを回避する方法を教えて下さい。

toggle の動作を何かに記憶させているのでしょうか?

よろしくお願いします。


●質問者: worldtravel
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:hoge JavaScript jQuery かに クリック
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● TransFreeBSD
●100ポイント ベストアンサー

clickは引数なしで呼び出すと、fireEvent/dispatchEvent相当を呼び出しますが、これだと「他の部分」をクリックすると閉じるだけでなく開くのも行ってしまいます。

そこで、slideToggleという便利なものを使います。

こんな感じでどうでしょう。

<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
 $(function(){
 $("#hoge").click(function(event){
 $("#foo").slideToggle("normal");
 event.stopPropagation();
 });
 $("#bar").click(function(){
 $('#foo').slideUp('normal');
 //$('#hoge').click();
 });
 });
 //-->
 </script>
</head>
<body><div id="bar">
 <p><a href="#" id="hoge">開閉</a></p>
 <p id="foo">コメント</p>
 <p>他の部分</p>
</div></body>
</html>

閉じるイベントを登録するdiv要素内に開閉する要素がない場合はいりませんが、ある場合は event.stopPropagation() でイベント伝播を止めないと変なことになります。

◎質問者からの返答

ありがとうございます。

まさにこれです!

この動作を求めていました。

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ