Início / coding / Perguntas / 79447374
Accepted
levent001
Asked: 2025-02-18 14:59:37 +0800 CST

Abra DIV/SPAN no lado direito (com conteúdo) no link Clique

  • 772

Estou exibindo os resultados em uma tabela HTML para respostas certas e erradas. insira a descrição da imagem aqui

Cada pergunta tem um "Explain Link" como a última coluna da tabela. Se clicado, quero um novo DIV ou SPAN aberto adjacente a ele no lado direito (expanda conforme necessário). Ele mostrará a explicação detalhada para aquela pergunta em particular. Ele incluirá texto que pode ser formatado em HTML com tags h2, h3, p e também pode incluir imagens (tipo "<img src"). Clicar novamente na mesma pergunta ou em uma pergunta diferente "Explain Link" deve fechar aquele DIV ou SPAN aberto.

Foi isso que eu tentei:

Javascript:

<script>
    $(function () {
        $('#button-1').click(function(){
            $('#popup-1').animate({height:'500px'}, 500);
        });
    });
</script>

HTML:

<tr><td>Q.2<td>C<td>C<td>&#9989;<td><a href='#' id="button-1">Explain</a><span id='popup-1'>Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>

CSS:

#popup-1{
    height: 0px;
    width: 100%;
    float: right;
    overflow: hidden;
    background: #efefef;
}

Alguma informação sobre o que está errado e como corrigi-lo?

javascript

2 respostas

  1. Best Answer

    se você quiser fazer isso sem JS, é mais fácil usar <details> a solução HTML mais simples e semântica: usar o <details>elemento .

    como abaixo você também pode estilizar isto:

    summary::marker {
  content: " ";
}

summary {
  color:blue;
  cursor:pointer;
  text-decoration:underline;
}
    <details>
  <summary>Explain</summary>
  <!-- add what you need  -->
  <h2>hello world</h2>
  <p>explain what you want</p>
  <!-- add what you need  -->
</details>

    • 9

  2. adicione / faça alterações no arquivo css conforme mencionado abaixo

    a {
    margin-right: 1rem;
}
.explain {
    display: none;
}
.dets {
     display: flex;
}

    adicione a função javascript abaixo ao seu arquivo de scripts

    
function show(e) {
    var prev = e.parentNode.children[1].style.display;
    $(".explain").css("display", "none");
    $(".explain").css("height", "0px");
    if (prev != "block") {
        e.parentNode.children[1].style.display = "block";
        e.parentNode.children[1].animate({ height: '500px' }, 500,);
        setTimeout(function () {
            e.parentNode.children[1].style.height = "500px";
        },499);
    }
}

    envolva o <a>and <span>em uma div, faça as seguintes alterações na <a>tag e adicione também a classe explainao span

    <div class="dets">
    <a href="javascript:void(0)" onclick="show(this)">Explain</a>
    <span id='popup-1' class="explain">Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>
</div>

    ao fazer as mudanças acima você alcançará o que deseja,

    então, basicamente, a ideia por trás disso é que você terá um div pai chamado DETS que conterá a <a>tag e a <span>exibição deste div é definida como flex, leia mais sobre os tipos de exibição , ele é definido como flexível, pois você deseja exibi-lo no lado direito do botão de explicação

    adicionado href="javascript:void(0)" onclick="show(this)"à <a>tag , o que basicamente significa que evita o comportamento padrão de recarregar ou abrir uma nova aba, e onclick chama uma função javascript,

    na função javascript, primeiro salvamos o estado atual do div/span de explicação, depois ocultamos e definimos a altura de todos os divs de explicação como zero, o que significa que cada explicação é ocultada, então verificamos o estado anterior do span de explicação atual, se já estava oculto ou não mostrado, então o exibimos, com uma animação de 500 ms de 0 a 500 px de altura

    setTimeout(function () {
    e.parentNode.children[1].style.height = "500px";
},499);

    isso é usado para fixar a altura em 500px após um atraso

    confira abaixo

        function show(e) {
        var prev = e.parentNode.children[1].style.display;
        $(".explain").css("display", "none");
        $(".explain").css("height", "0px");
        if (prev != "block") {
            e.parentNode.children[1].style.display = "block";
            e.parentNode.children[1].animate({ height: '500px' }, 500,);
            setTimeout(function () {
                e.parentNode.children[1].style.height = "500px";
            }, 499);
        }
    }
            a {
            margin-right: 1rem;
        }
        .explain {
            display: none;
        }
        .dets {
            display: flex;
        }
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>

    
    <table border="1">
        <tr>
            <th>Q</th>
            <th>YA</th>
            <th>CA</th>
            <th>RES</th>
            <th width="100%">DETAILS</th>
        </tr>
        <tr>
            <td>1</td>
            <td>x</td>
            <td>x</td>
            <td>YES</td>
            <td width="100%">
                <div class="dets">
                    <a href="javascript:void(0)" onclick="show(this)">Explain</a>
                    <span id='popup-3' class="explain">Explanation of answer<br>Goes<br>here<br>including images: <img
                            src='img-explain-q2.jpg'></img></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>y</td>
            <td>a</td>
            <td>NO</td>
            <td width="100%">
                <div class="dets">
                    <a href="javascript:void(0)" onclick="show(this)">Explain</a>
                    <span id='popup-2' class="explain">Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>
                </div>
            </td>
        </tr>
    </table>
</body>


</html>

    para exibir a explicação abaixo do botão explicar

    mudar

    .dets {
     display: flex;
}

    para

    .dets {
     display: block;
}

    Espero que isso tenha ajudado você, se tiver alguma dúvida relacionada à resposta, fique à vontade para perguntar

    • 2

relate perguntas