21
respostas

Collapse não funciona: DOMException (jQuery)

Referente ao curso Bootstrap: criação de uma single-page responsiva, no capítulo Começando a implementar o site seguindo o layout e atividade Fazendo a seção Sobre Nós

por Gabriel Souza Mendes
| 49.9k xp | 3 posts
Analista de Sistemas

Galera,

O collapse não funciona para os meus parágrafos.

A tela carrega normalmente (no inspetor de elementos, também não apresenta nenhum erro no console).

Porém, quando faço debug (aba Sources), o seguinte erro surge:

"DOMException: Failed to execute 'querySelectorAll' on 'Element': '*,:x'", referenciando o seguinte trecho do jQuery: "a.querySelectorAll("*,:x")"'

Já fiz o teste com a versão 3.2.1 e 2.2.4 do jQuery.

Estou usando a versão 3.3.7 do Bootstrap.

Alguém tem alguma idéia do que pode estar acontecendo? :/

21 respostas
por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Oi Gabriel, tudo bem? Você poderia colar o código completo aqui pra gente avaliar o que pode ser?

por Gabriel Souza Mendes
| 49.9k xp | 3 posts
Analista de Sistemas

Olá Wanderson,

Este é o código que estou utilizando...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <meta name="viewport" content=" width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="container">
            <h2>Sobre nós</h2>
            <img class="img-responsive" src="img/empresa.jpg" alt="Foto de Empresa">

            <h2 data-toogle="collapse" data-target="#primeiro-paragrafo">Desde 1935</h2>
            <p id="primeiro-paragrafo" class="collapse">A TopCasaFina Arquitetura está no mercado desde...</p>

            <h2 data-toogle="collapse" data-target="#segundo-paragrafo">Desde 1935</h2>
            <p id="segundo-paragrafo" class="collapse">A TopCasaFina Arquitetura está no mercado desde...</p>

            <h2 data-toogle="collapse" data-target="#terceiro-paragrafo">Desde 1935</h2>
            <p id="terceiro-paragrafo" class="collapse">A TopCasaFina Arquitetura está no mercado desde...</p>
        </div>
    </body>
    <script src="jquery-3.2.1.min.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script>
</html>
por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Gabriel, pelo seu código que parece OK, eu chuto que o problema está no jQuery. Se não me engano, a versão 3.3.7 do bootstrap não suporta o jQuery 3, no qual teve algumas quebras de compatibilidade. Tenta usar a versão 2 do jQuery e ver se funciona por favor?

por Auro Luis Alves De Andrade
| 11.7k xp | 2 posts

Wanderson e Gabriel,

Acabei de fazer essa aula e usei:

  • bootstrap-3-3-7/js/bootstrap.min.js
  • jquery-3.2.1.min.js

E funcionou. Não faço ideia do que pode ser...

por Alana
| 108.6k xp | 13 posts

Estou com o mesmo problema, alguem conseguiu resolver ?

por Alana
| 108.6k xp | 13 posts

e por onde eu posso baixa as versões antigas do jquery ?

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Alana, desculpa a demora, mas no site do jquery você tem um archive link: http://jquery.com/download/#past-releases

Na página que o link aponta, você consegue achar uma versão mais antiga.

Mas antes, vocês poderiam informar se estão usando a versão mais recente do browser que estão usando? Qual é a versão, navegador e sistema operacional que estão usando?

por Alana
| 108.6k xp | 13 posts

estou usando a versão jquery-3.2.1.min.js, o navegador = google chrome e o SO = windows 10

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Alana, você tentou uma versão mais antiga do jQuery? A 2.2 por exemplo? Resolveu pra você?

por Gabriel Souza Mendes
| 49.9k xp | 3 posts
Analista de Sistemas

Fiz novas tentativas com JQuery 3.2.1, 2.2.4 e 1.12.4 com Bootstrap 3.3.7 e agora até mesmo com o 4.0.0 (beta). Porém o erro permanece o mesmo. Estou usando Chrome versão 62 e IE versão 11 :(

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Nossa gente, isso tá bem estranho. Gabriel, me disponibiliza seu projeto pra que eu investigue isso mais de perto por favor?

por Felipe Lima de Azevedo
| 74.3k xp | 12 posts

estou com o mesmo erro, o meu também não funciona

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Felipe, me disponibiliza seu projeto de alguma forma pra mim testar por favor?

por Ronald Thomaz
| 80.5k xp | 1 posts
Diretor

Boa tarde. Eu estou com o mesmo problema, o collapse não funciona de modo algum. Fiz igual ao Auro luis porém sem resultado. O que pode ser?

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Gente, alguém por favor leia minha mensagem pedindo um zip do projeto pra que eu teste! Pode ser qualquer um! Ronald, Felipe, Gabriel ou qualquer pessoa com o problema, me disponibilizem um zip do projeto de vocês por favor.

por Marcos Vinicius de Araújo Andrade
| 741.9k xp | 198 posts
Full Stack Engineer

Pessoal, por alguma razão o colapse só funcionou quando eu troquei o script do jquery. Deve ser a compatibilidade. Eu setei o seguinte:

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

A fonte está aqui: https://code.jquery.com/

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Ótimo Marcos! Pessoal, vejam a solução do Marcos e testem. Caso funcione sem problemas, deem feedback aqui por favor.

por Salatiel Aizza
| 108k xp | 82 posts

Olá Gabriel.

Não sei se conseguiu resolver o problema com as considerações dos nossos colegas.

De toda forma eu vi que você colocou seu código assim:

<h2 data-toogle="collapse" data-target="#primeiro-paragrafo">Desde 1935</h2>
            <p id="primeiro-paragrafo" class="collapse">A TopCasaFina Arquitetura está no mercado desde...</p>

tenta trocar odata-toogle="collapse" por 

data-toggle="collapse"

Espero ter ajudado.

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Gabriel, dá um feedback aqui pra gente?

por Igor Gomes De Moisés
| 78.6k xp | 2 posts

Também estou com o mesmo problema.

Segue meu html.

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>

        <div class="container">
            <h1>
                Sobre Nós
            </h1>
            <img src="img/empresa.jpg" class="img-responsive"/>
            <h2 data-toggle = "collapse" data-target = "#primeiro-paragrafo">Desde 1935</h2>
            <p id = "primeiro-paragrafo" class = "collapse in">A TopCasa Fina Arquitetura está no mercado desde... </p>

            <h2 data-toggle="collapse" data-target="#primeiro-paragrafo">Desde 1935</h2>
            <p id="primeiro-paragrafo" class="collapse in">A TopCasa Fina Arquitetura está no mercado desde... </p> 

        </div>
        </div>
    </body>
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
</html>
por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Igor, acabei de testar seu código e está tudo bem com ele, não tive problema nenhum. A única coisa que ajustei foram os ids dos parágrafos. Você não pode ter dois ids iguais na página.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software