Jquery effect does not work because of relatives

Question

Jquery effect does not work because of relatives

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I need to open id="SUB_1" when I click on <li id="B1">Botão 1</li> and do the same when I click on <li id="B1">Botão 2</li> open id="SUB_1" that is below the q button has been clicked. And do msm with 3 as well, but only with that jquery I put in the end.

$(function(){
   $(".Principal").click(function(){
      $(this). ???
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><olclass="Principal">
        <li id="B1">Botão 1</li>
    </ol>

    <ol id="SUB_1">
        <li id="A1">1</li>
        <li id="A2">2</li>
        <li id="A3">3</li>
    </ol>


    <ol class="Principal">
        <li id="B1">Botão 2</li>
    </ol>

    <ol id="SUB_1">
        <li id="A4">4</li>
        <li id="A5">5</li>
        <li id="A6">6</li>
    </ol>


    <ol class="Principal">
        <li id="B1">Botão 3</li>
    </ol>

    <ol id="SUB_1">
        <li id="A7">7</li>
        <li id="A8">8</li>
        <li id="A9">9</li>
    </ol>

javascript html jquery

asked by anonymous 19.01.2018 / 18:28

2 answers

0

$(".B1").click(function(){
    $('.B1')($(this).parents('ol').next().slideToggle(200));
});

I did it that way.

Thank you to all who tried to help and who gave vlw tips

20.01.2018 / 16:38

Parking system How to avoid error Max retries exceeded in scraping in Python?

score 1 · Accepted Answer

It is incorrect to use multiple ids for more than one element. But since you're getting the click through the .Principal class, you can reference the element that comes down with .next() . Just for illustration, I created a class to visualize the effect:

$(function(){
   $(".Principal").click(function(){
      $(this).next().addClass("red");
   });
});

.red{
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><olclass="Principal">
   <li id="B1">Botão 1</li>
</ol>

<ol id="SUB_1">
   <li id="A1">1</li>
   <li id="A2">2</li>
   <li id="A3">3</li>
</ol>

<ol class="Principal">
   <li id="B1">Botão 2</li>
</ol>

<ol id="SUB_1">
   <li id="A4">4</li>
   <li id="A5">5</li>
   <li id="A6">6</li>
</ol>

<ol class="Principal">
   <li id="B1">Botão 3</li>
</ol>

<ol id="SUB_1">
   <li id="A7">7</li>
   <li id="A8">8</li>
   <li id="A9">9</li>
</ol>

But I recommend correcting your code by taking those various ids . You you can use class instead of id .