Question

我是网络编程新手，想要创建一个扩展和折叠信息列表的链接。我能够使用单选按钮执行此操作，如下面的示例所示。您可以告诉我如何使用可点击链接实现相同功能，而不是使用单选按钮或常规按钮。例如：+ More

请尽可能向我展示一个例子。

<script type="text/javascript">
        function OnChangeCheckbox1 (checkbox) {

            if (checkbox.checked) {
                document.getElementById(checkbox.name).style.display = 'none';
                document.getElementById(checkbox.id).style.display = 'none';
            }
        }
        function OnChangeCheckbox2 (checkbox) {

            if (checkbox.checked) {
                document.getElementById(checkbox.name).style.display = 'block';
                document.getElementById(checkbox.value).style.display = 'block';
            }
        }
    </script>


* Some Information about X<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid1" value="lessid1" onclick="OnChangeCheckbox2 (this)" />+ More</label>
<span style="display:none" id="moreid1" ><label for="id_advisor">First some text<br>First more text</label></span>
<label style="display:none" class="radio" id="lessid1"><input id="lessid1" type="radio" name="moreid1" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>

<br><br>

* Some Information about Y<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid2" value="lessid2" onclick="OnChangeCheckbox2 (this)" > + More</label>
<span style="display:none" id="moreid2" ><label for="id_advisor">Second Some text<br>Second more text</label></span>
<label style="display:none" class="radio" id="lessid2"><input id="lessid2" type="radio" name="moreid2" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>

<br><br><br>
Aditional Information goes here

工作代码：https://jsfiddle.net/hey4769/owpat8zf/

Answer 1

你可以通过href来添加这样的javascript：

href="javascript:MyFunction"

为了举个例子，我改变了你的代码。

https://jsfiddle.net/owpat8zf/3/

Answer 2

虽然使用value / name / id属性是个主意，但请注意这并不适用于所有元素。在html5中也不推荐使用name属性（至少对于某些元素）。

所以我选择使用数据属性。而且，由于我被jQuery使用，我决定在javascript中测试一些东西，并包含2个不同的函数，一个使用this，另一个使用jQuery。

为了选择要显示/隐藏的元素，我使用了document.querySelector，它就像一个css选择器。

我也在点击它后更改元素上的文字。最后我添加了一些控制台日志。希望它有用！

https://jsfiddle.net/hamu21gj/

如何使用链接展开/折叠网页中的信息列表

2 个答案: