1
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="stylesheet" href="/static/scrapy/style.css">

<div class="container w-50">
    <h1 class="display-4">Scrapy Data</h1>
    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">






                <div>
                    <a id="Tipos-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseTipos">
                        <div class="d-flex align-items-center">
                            <span>Tipos</span>
                            <div id="spinnerTipos" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseTipos" data-parent="#Group" role="button" href="/scrapy/scrapy-tipos" onclick="disableLinks(); showSpinners('#spinnerTipos');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Habilidades-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHabilidades" role="button" aria-expanded="true" aria-controls="collapseHabilidades">
                        <div class="d-flex align-items-center">
                            <span>Habilidades</span>
                            <div id="spinnerHabilidades" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseHabilidades" data-parent="#Group" role="button" href="/scrapy/scrapy-habilidades" onclick="disableLinks(); showSpinners('#spinnerHabilidades');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Categorias-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCategorias" role="button" aria-expanded="true" aria-controls="collapseCategorias">
                        <div class="d-flex align-items-center">
                            <span>Categorias</span>
                            <div id="spinnerCategorias" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseCategorias" data-parent="#Group" role="button" href="/scrapy/scrapy-categorias" onclick="disableLinks(); showSpinners('#spinnerCategorias');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Pokemons-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePokemons" role="button" aria-expanded="true" aria-controls="collapsePokemons">
                        <div class="d-flex align-items-center">
                            <span>Pokemons</span>
                            <div id="spinnerPokemons" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <form class="form-inline collapse" action="index.html" method="post" id="collapsePokemons" data-parent="#Group">
                                <div class="ml-2 mt-2 form-group">
                                    <input type="text" name="idpoke" class="form-control" placeholder="Id do 1° pokémon ">
                                </div>
                                <button type="submit" class="ml-4 px-4 btn btn-outline-success" role="button" onclick="disableLinks(); showSpinners('#spinnerPokemons');">Scrapy</button>
                            </form>

                    </a>
                </div>


        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script type="text/javascript">
    function disableLinks() {
        $("a").addClass("disabled");
    }
    function showSpinners(arg){
        $(arg).collapse()
        $("a").collapse('hide')
    }
</script>

Não consegui criar um título que remetesse bem ao problema, mas aqui vai a explicação. Estou usando essas tags links com a class "btn" do bootstrap, quando eu clico no link dos cards (tag de link com o id [algo]-link, por exemplo Tipos-link) a tag de link dentro dela (com class "btn") deveria aparecer dentro desse card, mas aparece fora, no entanto se eu mudo para a tag <button> fica tudo certo, mas preciso ligar essa tag a um link, então não poderia usar <button>. Alguma dica?

2 Respostas 2

1

Você não pode aninhar um elemento <a> dentro de outro <a>. O navegador reconhece que isso é errado (porque é contra as especificações HTML) e irá fechar o primeiro <a> para abrir o outro, fazendo os dois elementos separados, um após o outro.

O indicado é usar o elemento <a> como um link (usando o atributo href). Se esta não for a função do <a> no seu código, então é melhor usar ele como um button ou uma div.

Se o problema for o cursor, basta colocar no seu CSS a propriedade cursor: pointer no elemento.

1
  • Valeu eu n conseguia de jeito nenhum achar uma resposta Commented 15/05/2019 às 2:08
0

no primeiro a troque por div acredito que seja isso o que vc quer:

function disableLinks() {
        $("div").addClass("disabled");
    }
    function showSpinners(arg){
        $(arg).collapse()
        $("div").collapse('hide')
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="stylesheet" href="/static/scrapy/style.css">

<div class="container w-50">
    <h1 class="display-4">Scrapy Data</h1>
    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">






                <div>
                    <div id="Tipos-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseTipos">
                        <div class="d-flex align-items-center">
                            <span>Tipos</span>
                            <div id="spinnerTipos" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseTipos" data-parent="#Group" role="button" href="/scrapy/scrapy-tipos" onclick="disableLinks(); showSpinners('#spinnerTipos');">Scrapy</a>

                    </div>
                </div>







                <div>
                    <div id="Habilidades-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHabilidades" role="button" aria-expanded="true" aria-controls="collapseHabilidades">
                        <div class="d-flex align-items-center">
                            <span>Habilidades</span>
                            <div id="spinnerHabilidades" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseHabilidades" data-parent="#Group" role="button" href="/scrapy/scrapy-habilidades" onclick="disableLinks(); showSpinners('#spinnerHabilidades');">Scrapy</a>

                    </div>
                </div>







                <div>
                    <div id="Categorias-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCategorias" role="button" aria-expanded="true" aria-controls="collapseCategorias">
                        <div class="d-flex align-items-center">
                            <span>Categorias</span>
                            <div id="spinnerCategorias" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseCategorias" data-parent="#Group" role="button" href="/scrapy/scrapy-categorias" onclick="disableLinks(); showSpinners('#spinnerCategorias');">Scrapy</a>

                    </div>
                </div>







                <div>
                    <div id="Pokemons-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePokemons" role="button" aria-expanded="true" aria-controls="collapsePokemons">
                        <div class="d-flex align-items-center">
                            <span>Pokemons</span>
                            <div id="spinnerPokemons" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <form class="form-inline collapse" action="index.html" method="post" id="collapsePokemons" data-parent="#Group">
                                <div class="ml-2 mt-2 form-group">
                                    <input type="text" name="idpoke" class="form-control" placeholder="Id do 1° pokémon ">
                                </div>
                                <button type="submit" class="ml-4 px-4 btn btn-outline-success" role="button" onclick="disableLinks(); showSpinners('#spinnerPokemons');">Scrapy</button>
                            </form>

                    </div>
                </div>


        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .