предотвратить повторение действия дважды

ProgramBox

предотвратить повторение действия дважды

Post author:admin
Запись опубликована:23 апреля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

я создал небольшое меню с <ul> <li> :

js:

 $('#ulAcoesCliente li').click(function(ev) {
    $(".ulNone").each(function(){
        if($(this).css("display") == "block"){
            $(this).hide('slow');
        }
    });
    $(this).find('>ul').toggle('slow');
    ev.stopPropagation();
});

каждый из них открывает любую область меню, закрывает и открывает там, где пользователь нажимает, как аккордеон (по одному за раз).

но если я нажму на то же самое, событие произойдет дважды.

закроет текущее подменю

откроется снова.

как я могу предотвратить это?

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

Спасибо

Редактировать:

html по мере необходимости

                               <ul id="ulAcoesCliente">
                                    <li>
                                        <button style="font-size: 9px;" id="optComentario">Comentario</button>
                                        <ul class='ulNone' style="display: none;">
                                            <li>
                                                <button style="font-size: 9px; width: 150px;" id="liInserirComentario">Inserir comentario</button>
                                                <ul style="display: none;">
                                                    <li>
                                                        <div style="margin-left: 10px;padding: 5px;">
                                                            <input id="comentario" type="text" size="20"/>
                                                            <button style="font-size: 9px; width: 60px;" id="butInsereComent">Salvar</button>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li style="margin-top: 3px;"><button style="font-size: 9px; width: 150px;" id="listaComent">Listar comentarios</button></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <button style="font-size: 9px; margin-top: 3px;" id="OptEmail">E-mail</button>
                                        <ul class='ulNone' style="display: none;">
                                            <li style="margin-top: 5px;"><button style="font-size: 9px; width: 150px;" id="enviaEmail">Enviar E-mail</button></li>
                                            <li style="margin-top: 3px;"><button style="font-size: 9px; width: 150px;" id="listaEmails">Listar E-mails</button></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <button style="font-size: 9px; margin-top: 3px;" id="">Tarefa</button>
                                        <ul class='ulNone' style="display: none;">
                                            <li style="margin-top: 5px;"><button style="font-size: 9px; width: 150px;" id="">Criar Tarefa</button></li>
                                            <li style="margin-top: 3px;"><button style="font-size: 9px; width: 150px;" id="">Listar Tarefas</button></li>
                                        </ul>
                                    </li>
                                </ul>

правка 2:

я достигаю этого: ( @Jayendra, сделал то же самое)

но второй уровень, закройте.

      if(!($(this).children('ul').css("display") == "block")){
        $(".ulNone").each(function(){
            if($(this).css("display") == "block"){
                $(this).stop(true,true).hide('slow');
            }
        });
        $(this).find('>ul').stop(true,true).toggle('slow');
        ev.stopPropagation();
    }

Ответ №1:

Происходит то, что то, .ulNone через что вы выполняете цикл, выберет то же самое, ul что и ваш $(this).find('>ul') селектор, заставляя его закрываться, а затем открываться снова.

Поскольку вы хотите, чтобы верхние кнопки управляли переключением, вы должны поместить событие на это, а не на li .

 $('#ulAcoesCliente > li > button').click(function(ev) {
    $(this).next().toggle('slow');
    $(this).parent("li").siblings().find(".ulNone:visible").toggle('slow');
});

Рабочий пример: http://jsfiddle.net/hunter/cnWjg /

1. мне нужно только одно меню за раз.

2. можете ли вы сделать это, работая со вторым уровнем? проверьте, что @Jayendra опубликовал демонстрационную версию, проблема происходит там, чтобы.

3. откройте первое меню и щелкните в Inserir Comentario , оно закроется вместо открытого.

4. Я не вижу этого в Chrome. Какой браузер? Вы хотите, чтобы оно закрывало верхнюю часть при нажатии кнопки 2-го уровня?

5. да, это не одноуровневое меню, щелкните первое меню, затем нажмите Inserir Comentario , оно закроется, если вы снова откроете первое меню, будет открыто меню уровня 2.

Ответ №2:

Попробуйте — демо

 $('#ulAcoesCliente li').click(function(ev) {
    if(!$(this).find('>ul').is(':visible')){
        $(".ulNone:visible").hide('slow');
        $(this).find('>ul').toggle('slow');
        ev.stopPropagation();
    }
});

Ответ №3:

Я мог бы предложить сделать что-то вроде этого:

 $('#ulAcoesCliente li').click(function() {
  $('#ulAcoesCliente li').slideUp();
  $(this).slideDown();
});

1. Вы также можете заменить эту скользящую строку, чтобы сделать что-то вроде того, что у вас есть, а именно: code $(‘#ulAcoesCliente li’).each(function() { if ($(this).css(‘display’)) == «none») $(this). slideUp(); }); code

Ответ №4:

Может быть, что-то вроде этого?

 // caching
var $ulNone = $('.ulNone').filter(function () {
    return $(this).css('display') === 'block';
});

// handler
$('#ulAcoesCliente > li').click(function (e) {

    e.stopPropagation();

    var $myUl = $(this).find('> ul').show('slow');
    $ulNone.not($myUl).hide('slow');

});

Ключ заключается в удалении UL того, на что вы нажимаете, из набора, который вы скрываете.

Конечно, если вы согласны с этим, вы можете просто поместить toggle логику в один оператор:

 $ulNone.not(
    $(this).find('> ul').show('slow')
).hide('slow');

Однако это немного ухудшает читаемость.