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

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

javascript jquery html

Javascript 如何使用链接展开/折叠网页中的信息列表,javascript,jquery,html,Javascript,Jquery,Html,我是网络编程新手，希望创建一个链接来扩展和折叠信息列表。我可以使用单选按钮来实现这一点，如下面的示例所示。请告诉我如何使用可点击链接来实现相同的功能，而不是使用单选按钮或常规按钮。例：如果可能，请给我举个例子 <script type="text/javascript"> function OnChangeCheckbox1 (checkbox) { if (checkbox.checked) { docu

我是网络编程新手，希望创建一个链接来扩展和折叠信息列表。我可以使用单选按钮来实现这一点，如下面的示例所示。请告诉我如何使用可点击链接来实现相同的功能，而不是使用单选按钮或常规按钮。例：

如果可能，请给我举个例子

<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


函数OnChangeCheckbox1（复选框）{
如果（复选框。选中）{
document.getElementById（checkbox.name）.style.display='none'；
document.getElementById（checkbox.id）.style.display='none'；
}
}
函数OnChangeCheckbox2（复选框）{
如果（复选框。选中）{
document.getElementById（checkbox.name）.style.display='block'；
document.getElementById（checkbox.value）.style.display='block'；
}
}
*关于X的一些信息

+更多
首先是一些文本
首先是更多文本
-少



*关于Y的一些信息

+更多
第二段文字
第二段文字
-少




这里有传统的信息

工作代码：

您可以通过href添加javascript，如下所示：

href="javascript:MyFunction"

我对你的代码做了一点修改，只是为了举个例子

您可以通过href添加javascript，如下所示：

href="javascript:MyFunction"

我对你的代码做了一点修改，只是为了举个例子

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

所以我选择使用数据属性。而且，由于我对jQuery的使用感到厌倦，我决定用javascript测试一些东西，并包括两个不同的函数，一个使用

this

，另一个传递事件

为了选择要显示/隐藏的元素，我使用了

document.querySelector

，它的工作原理类似于css选择器

我还将在单击a元素后更改该元素上的文本。最后，我添加了一些控制台日志。希望有用