主页 / coding / 问题 / 79447374
Accepted
levent001
Asked: 2025-02-18 14:59:37 +0800 CST

在链接上打开右侧的DIV / SPAN（包含内容）单击

  • 772

我正在 HTML 表中显示正确和错误答案的结果。 在此处输入图片描述

每个问题都有一个“解释链接”作为表格的最后一列。如果单击，我希望在右侧旁边打开一个新的 DIV 或 SPAN（根据需要展开）。它将显示该特定问题的详细解释。它将包含可以使用 h2、h3、p 标签格式化的 HTML 文本，也可能包含图像（“<img src”类型）。再次单击相同或不同的问题“解释链接”应关闭打开的 DIV 或 SPAN。

这是我尝试过的：

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>

样式表：

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

对于哪里出了问题以及需要做出哪些弥补，您有什么意见吗？

javascript

2 个回答

  1. Best Answer

    如果您想在没有 JS 的情况下实现这一点，更容易使用<details> 最简单和最语义的 HTML 解决方案是使用<details>元素。

    像下面你也可以这样设计：

    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. 按照下面所述添加/更改 css 文件

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

    将以下 javascript 函数添加到你的脚本文件中

    
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>and包裹<span>在 div 中，在标签中进行以下更改，<a>同时将类添加explain到 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>

    通过进行上述更改，您将实现您想要的目标，

    所以基本上整个想法是，你将有一个名为DETS 的父 div ，它将包含<a>标签和<span>这个 div 的显示设置为flex，阅读有关显示类型的更多信息，它被设置为 flex，因为你想将它显示在解释按钮的右侧

    添加href="javascript:void(0)" onclick="show(this)"到<a>标签中，这基本上意味着它可以防止重新加载或打开新选项卡的默认行为，并且 onclick 调用一个 javascript 函数，

    在 javascript 函数中，我们首先保存解释 div/span 的当前状态，然后隐藏所有解释 div 并将其高度设置为零，这意味着每个解释都被隐藏，然后我们检查当前解释跨度的先前状态，如果它已被隐藏或未显示，则显示它，使用 500ms 的动画从 0-500px 高度

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

    用于在延迟后将高度固定在 500px

    请查看下面

        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>

    在解释按钮下方显示解释

    改变

    .dets {
     display: flex;
}

    到

    .dets {
     display: block;
}

    我希望这对你有帮助，如果对答案有任何疑问，请随时询问

    • 2

相关问题