jQuery - закрыть раскрывающийся список с помощью .mouseout или более подходящего метода, подсказка?

У меня есть следующий фрагмент кода:

$(".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, как я сделал в начале.

Выпадающий список состоит из двух частей: «заголовок» и «тело», и я хочу, чтобы весь раскрывающийся список закрывался, когда я отказываюсь от одного или другого, но пока не повезло. Мне не хватает реальных знаний в jQuery (просто прикосновение тут и там, но на данный момент ничего выдающегося), поэтому я сбит с толку. Я пробовал .mouseout, .mouseleave, .focusout и другие методы.

Я даже прибегал к jQuery++, чтобы использовать метод .within, но тоже запутался. Может ли кто-нибудь из вас указать мне правильное направление?


person Julio María Meca Hansen    schedule 11.03.2013    source источник


Ответы (1)


Как я понял: вы хотите свернуть таблицу с помощью мыши. Почему бы вам не добавить что-то вроде этого:

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

это не работает для вас?

person paraselena    schedule 11.03.2013
comment
Именно то, что я искал. Мне также пришлось добавить ту же конструкцию для класса .option_box для полного эффекта, но ничего себе... это был действительно потрясающий ответ. Я должен тебе БОЛЬШОЙ :) - person Julio María Meca Hansen; 12.03.2013