Вопрос выбора jQuery

Question

РЕДАКТИРОВАТЬ : так как приведенные ниже решения не сработали, я добавил больше кода для ясности.

Я динамически генерирую следующий HTML. Это в основном промежуток, который позиционируется так, чтобы при каждом нажатии productControl всплывал элемент productMenuHolder с меню. После отпускания мыши меню исчезает.

<span class="productControl">
    <div class="productMenuHolder" style="display:none;">
        <ul class="productMenuList">
            <li class="productMenuItem">Menu Item 1</li>
            <li class="productMenuItem">Menu Item 2</li>
            <li class="productMenuItem">Menu Item 3</li>
        </ul>
    </div>
</span>

Ниже приведен пример jQuery, который всплывает в меню и скрывает его, когда мышь покидает область меню.

    //shows the hover image 
    $(".productControl").live('hover',function (){$(this).toggleClass("productControl_hover");});

    //pops the menu when productControl is clicked
    $(".productControl").live('click',function(){$(this).find('.productMenuHolder').show();});

    //hides the menu when the mouse leaves the menu
    $('.productMenuHolder').live('mouseleave',function() {$(this).hide();});

    //what i want is to hide the menu when a list item is clicked, however none of the solutions (e.g. closest, find, parent) seem to hide it!
    $('.productMenuHolder li').live('click',function(){ 
    //why are none of the solutions hiding it?
        $(this).closest('.productMenuList').hide();
        $(this).closest('.productMenuHolder').hide();
    });

Answer 1

использование .closest().

$('.apple').live('click',function(){
   $(this).closest('.box').hide();
});

---

или сделать это во всех li из ul с class="fruits"

$('.fruits li').live('click',function(){
   $(this).closest('.box').hide();
});

---

обновленный ответ

//pops the menu when productControl is clicked
$('.fruits li').live('click',function(e){ // pass e as parameter...
   e.stopPropagation();
   $(this).closest('.box').hide();
});

используйте .stopPropagation(), чтобы остановить родительский объект, вызывающий обработчик кликов, который $(".productControl").live('click',function(){...}); заставляет его снова показывать ...

---

еще одно обновление

$(".productControl").live('click',function(e){
   if ($(e.target).is('li')) return; // <-- add this line...
   //... other codes
});

Answer 2

Это лучший способ сделать это:

$('.apple').live('click', function() { 
    $(this).closest(".box").hide();
});

Но использование parents также должно работать (разница в том, что он также будет скрывать .box далее в дереве DOM) Если это не сработает, возможно, нам потребуется больше информации о вашем коде.

Answer 3

просто сделай $('.box').hide();

если это не сработало, то вы пытались вставить предупреждение в код, чтобы увидеть, запускается ли событие?

или попробуйте двух родителей, так как яблоко - ребенок ul, а затем вы попадаете в коробку.

Это также зависит от того, в какой момент вы создаете живой код. если вы создаете его при загрузке документа, он должен работать. однако, если вы создаете его при создании «.box», он не будет работать, поскольку он не выполнен.