jQuery показывает элемент, если щелкает основная оболочка, но не, если щелкает конкретный элемент - PullRequest
Новая
       15

jQuery показывает элемент, если щелкает основная оболочка, но не, если щелкает конкретный элемент

0 голосов
/ 30 января 2012

У меня проблемы с простым меню скрыть / показать с помощью jQuery.

HTML-разметка выглядит следующим образом: 

<div class="content borderRad5" id="mainWrapper">

    <div id="ticketControl" class="noPrint blackBoxShadow">
        <span id="printThis" class="TicketButton">Print</span>
        <span id="emailThis" class="TicketButton">Email as Word</span>
            <div id="emailDoc" class="blackBoxShadow borderRad5">
                <div class="underline">Email to:</div>
                <label>Email</label> 
                <span>
                    <input type="text" class="smallText" />
                </span>
            </div>
        <span id="wordThis" class="TicketButton">Save as Word</span>
        <span id="addToLoyalty" class="TicketButton">Add to Account</span>
        <span id="addNote" class="TicketButton">Add Note</span>
        <span id="refundThis" class="TicketButton">Refund</span>
    </div>

  ---- THE REST OF THE PAGE ----

</div>

#ticketControl - это скрытый div, содержащий меню. Если щелкнуть мышью в любом месте внутри .content div, я хочу, чтобы она скользила в поле зрения. JQuery ниже делает это просто замечательно. 

    $('.content').live('click', function () {
        $('#ticketControl').slideToggle('slow');
    });

Однако у меня есть второй скрытый элемент div в этом главном меню #emailDoc, который должен отображаться при нажатии на #emailThis, очевидно, это легко, НО, я не могу помешать ему скрыть меню снова.

Я понимаю, почему это происходит, потому что что-то в .content вызывает функцию slideToggle, как указано выше, но я не могу остановить это, я пытался использовать .not('.TicketButton'), а также пытался получить родительские идентификаторы и исключать их и так далее, но я явно упускаю что-то очевидное!

Любая помощь очень ценится (и да, я понимаю, что должен использовать jquery on, но сейчас я придерживаюсь live ...!)

Ответы [ 2 ]

0 голосов
/ 30 января 2012

Как вы сказали, вам не нужно использовать live, непосредственно прикрепите обработчик события click к обоим элементам и вызовите event.stopPropagation() [документы] , чтобы предотвратить всплывание события и запуск других обработчиков событий: 

$('.content, #emailThis').click(function(e) {
    e.stopPropagation();
    $(this).children().slideToggle('slow');
});

Если вы не можете использовать такой обработчик событий, я предлагаю вам использовать универсальные классы, которые связывают элементы со своими потомками, которыенадо переключить.Например, элементы, которые должны иметь такое поведение, могут иметь класс header и дочерние элементы, которые должны быть переключены toggle (извините, я немного не креативен в данный момент): 

$('.header').click(function(e) {
    e.stopPropagation();
    $(this).children('.toggle').slideToggle('slow');
});

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

0 голосов
/ 30 января 2012

Вызовите event.stopPropagation() в функции обратного вызова click для #emailThis, чтобы событие не связывало DOM с родительскими элементами.

...