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 の動作を何かに記憶させているのでしょうか?

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/06/05 22:06:14
  • 終了:2011/06/06 00:30:10

ベストアンサー

id:TransFreeBSD No.1

TransFreeBSD回答回数667ベストアンサー獲得回数2682011/06/06 00:20:29

ポイント100pt

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() でイベント伝播を止めないと変なことになります。

id:worldtravel

ありがとうございます。

まさにこれです!

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

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

2011/06/06 00:29:51
  • id:a-kuma3
    #hoge 以外をクリックした時に、#hoge に対して、IE なら fireEvent、FF なら dispatchEvent かな。

    自動回答拒否されてるっぽいので、コメントで失礼。
  • id:worldtravel
    ありがとうございます。
    試してみます。

    あれ〜!?
    自動拒否は相当前に解除してあるんですが.....
    昨日も他の方に言われました。

    システムが新しくなった日には
    回答拒否している方に回答されたし... --;

    はてなに聞いても返信が来ないので
    全部削除して、全部解除してあるんですけど.....
  • id:worldtravel
    すみません。
    ブラウザ毎に変えるのを書くのが面倒なので、
    開いていたら閉じる、閉じていたら開く
    という関数にして、呼び出すようにしました。 --;

    IE なら fireEvent、FF なら dispatchEvent
    はメモしておきます。

    ありがとうございました。
  • id:Cherenkov
    条件が不明すぎて、エスパー回答しか付きませんよ。
    最低限、要素の状態なりサンプルを示すべきです。
    あとGoogle Mapでやりたいことならそれを明記したほうが。

    https://gist.github.com/
    http://jsfiddle.net/

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません