Click Subitem menu brings up level id

Asked

Viewed 108 times

1

I’m making a menu where when I click on it I send a code to a page, this page it redirects to the page that was set with that id. Up to this point it’s working only when I click on the submenu, it brings me his father’s code.

carregarPaginas();

function carregarPaginas() {
    $(".subitem").click(function(e) {
        e.preventDefault();

        var acao = $(this).find('.acao').html();
        location.href = 'includes/publicacao.php?c=' + acao;
    });

    $(".menuLi").click(function(e) {
        e.preventDefault();

        var acao = $(this).find('.acao').html();
        location.href = 'includes/publicacao.php?c=' + acao;
    });
};

Here comes the menu structure:

<li class="menuLi">
    <div class="acao">-3</div>
    <div class="desc">Servicos</div>
    <div class="submenuC">
        <ul class="submenu">
            <li class="subitem">
                <div class="acao">-4</div>
                <div class="desc">Downloads</div>
            </li>
            <li class="subitem">
                <div class="acao">-5</div>
                <div class="desc">Videos</div>
            </li>
        </ul>
    </div>
</li>
javascript jquery
  • 1

    Forehead join e.stopPropagation(); inside $(".subitem").click(function (e) {

  • Try what @Sergio commented, and also select .acao as the direct son of .menuLi and .submenu. You can do var acao = $(' > .acao', this).html()

  • vlw gave it right. makes an answer to min accept it.

  • @Caiofelipepereira and So now the second li of the sub menu does not work.

  • What is the "second li of the sub menu"? is in your example?

  • Now you see her

  • Works well for me: http://jsfiddle.net/37p2crxs/

  • Thanks for helping.

  • From the answer you’ve accepted tell me you don’t understand the problem....

  • The more it worked and the other was the only one who gave me a complete answer.

  • Got some better solution @Sergio ?

  • @Renanrodrigues my answer below. For example in jsFiddle I put here in the coments (http://jsfiddle.net/37p2crxs/).

  • 1

    Now it’s worked out, thanks again.

Show 8 more comments

2 answers

4


When you click on the child element the event goes up in the DOM and also fires the event click in the father (.menuLi).

So you have to keep it from spreading with e.stopPropagation(); and therefore do not trigger the parent element event.

The code would look like this:

$('.subitem').click(function(e){
    e.stopPropagation();
    // resto do código...

3

The problem is that when you click on a sub-item, you are also clicking on the menu. Hence, you predict to validate the clicked item

carregarPaginas();

            function carregarPaginas() {
                $(".subitem").click(function (e) {
                    e.preventDefault();

                    var acao = $(this).find('.acao').html();
                    location.href = 'includes/publicacao.php?c=' + acao;
                });

                $(".menuLi").click(function (e) {
                    e.preventDefault();
                    if(ehDescendenteDeSubItem(e.target)) return;

                    var acao = $(this).find('.acao').html();
                    location.href = 'includes/publicacao.php?c=' + acao;
                });
            }

function ehDescendenteDeSubItem(e){
    return $(e).parent().attr('class') === 'subitem'
}

  • Thank you very much yours worked perfectly. and with all the particularities.

  • 1

    This response implies that $(e).parent().attr('class') === 'subitem' only checks true if $(e).parent() only have one class. If you have more classes this will give false (solution: hasClass('subitem')) . And in the case of . acao would have a span for example the code will find the .parent() wrong (solution: .closest('li')).

  • You’re right, Sergio, I ended up not validating all the possibilities. But, the focus was the explanation as to the validation of the clicked item, for specific cases (and/or more general), I believe that now it will be able to implement.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.