1

私は次のコードを持っています：

$(".option_box .option_name").click(function () {
    $(this).siblings(".collapsible").toggle();
    $(this).toggleClass("hided");
});

$(".option_box .attribute_group_name").click(function () {
    $(this).siblings(".attribute_box").toggle();
    $(this).toggleClass("hided");
});

それに関連付けられているHTMLコードは次のとおりです。

<div class="option_box" style="left:140px;">
    <div class="option_name">Gama</div>
    <table class="collapsible">
        <tr>
            <td><input id="gama_1" class="gama_value filtered" type="checkbox" name="gama[]" value="1" /></td>
            <td><label for="gama_1">Correcta</label></td>
        </tr>
        <tr>
            <td><input id="gama_2" class="gama_value filtered" type="checkbox" name="gama[]" value="2" /></td>
            <td><label for="gama_2">Aficionado</label></td>
        </tr>
        <tr>
            <td><input id="gama_3" class="gama_value filtered" type="checkbox" name="gama[]" value="3" /></td>
            <td><label for="gama_3">Entusiasta</label></td>
        </tr>
        <tr>
            <td><input id="gama_4" class="gama_value filtered" type="checkbox" name="gama[]" value="4" /></td>
            <td><label for="gama_4">Purista</label></td>
        </tr>
        <tr>
            <td><input id="gama_5" class="gama_value filtered" type="checkbox" name="gama[]" value="5" /></td>
            <td><label for="gama_5">Exclusive</label></td>
        </tr>
    </table>
</div>

これは、視覚的にこれを生成します：

ドロップダウンスタイルのフィルターのビュー

私の問題は、マウスをドロップダウンから移動したときにドロップダウン（実際にはテーブルが内部にあるdiv要素）を閉じたいことですが、ご覧のとおり、ドロップダウンはそれほど簡単ではありません。最初に行ったように、.mouseoutイベントを宣言することです。

ドロップダウンは「ヘッダー」と「本体」の2つの部分で構成されており、どちらか一方を放棄したときにドロップダウン全体を閉じたいと思っていますが、これまでのところ運がありません。私はjQueryについての本当の知識が不足しているので（あちこちで素朴なタッチですが、今のところ素晴らしいものは何もありません）、混乱しています。.mouseout、.mouseleave、.focusoutなどの方法を試しました。

.withinメソッドを使用するためにjQuery++に頼ったこともありますが、同様に失われます。誰かが私を正しい方向に向けてくれませんか？

4

1 に答える 1

2

私が理解したように：あなたはmouseoutでテーブルを折りたたむことを望みます。次のようなものを追加してみませんか。

$(".collapsible").mouseleave(function() {
    $(".collapsible").hide();
})

それはあなたのために働きませんか？

于 2013-03-11T17:41:55.437 に答える