jquery hover скрывает дочерний элемент - PullRequest
Новая
       26

jquery hover скрывает дочерний элемент

2 голосов
/ 02 октября 2011

drop down

живой пример : http://jsbin.com/axaqoc/2

когда я пытаюсь выбрать дочерний блок выбора, меню dropDown скрывается, думая, что мышь ушла от родительского элемента.

JS код: (полный код: http://pastie.org/2624436)

$('.dropOption').hover(function(e) {
        e.stopPropagation();
        $(this).trigger('dropOption', 'show'); // show the parent element
        return false;
    },function(e) {
        e.stopPropagation();
        $(this).trigger('dropOption', 'hide'); // hide the parent on mouse out
        return false;
    });

как остановить всплывающее меню при выборе? (Между прочим, это прекрасно работает на Chrome, но не на любом другом браузере.)

HTML-код: 

<ul><li id="repeat" class="dropOption active"><a href="#" class="dropLink active tips" data-tips-position="right center"><span class="icon repeat">Repeat Off</span></a>
                        <ul class="repeatOptions active">
                            <li><label>Repeat Each</label> <select class="repeatEach" name="repeatEach"><option value="ayah">Ayah</option><option value="page">Page</option><option value="surah">Surah</option><option value="Juz">Juz</option></select></li>
                            <li><label>Repeat Times</label> <select class="repeatTimes" name="repeatTimes"><option value="1">x1</option><option value="2">x2</option><option value="3">x3</option><option value="4">x4</option><option value="5">x5</option><option value="6">x6</option><option value="7">x7</option><option value="8">x8</option><option value="9">x9</option><option value="0">&infin;</option></select></li>
                            <li><label>Delay</label> <select class="repeatDelay" name="repeatDelay"><option value="0">0 sec</option><option value="1">1 sec</option><option value="2">2 sec</option><option value="3">3 sec</option><option value="4">4 sec</option><option value="5">5 sec</option><option value="5">5 sec</option><option value="6">6 sec</option><option value="7">7 sec</option><option value="8">8 sec</option><option value="9">9 sec</option><option value="ayah">Ayah Duration</option></select></li>
                        </ul>
                    </li>
                </ul>

1 Ответ

0 голосов
/ 02 октября 2011

e.relatedTarget = null если мышь находится над полем выбора 

    $('.dropOption').hover(function(e) {
            $(this).trigger('dropOption', 'show');
        },function(e) {
            if (e.relatedTarget != null) // drop down select box fix
                $(this).trigger('dropOption', 'hide');
        });
...