在HTML页面上展开/折叠行最简单的方法是什么？

什么是最简单的方法可以让HTML页面上的某些行在被点击时展开（和折叠）？在HTML页面上展开/折叠行最简单的方法是什么？

背景：我使用了一个定制的CMS，我可以在其中粘贴HTML并且还可以编辑CSS。但是我无法添加特殊的库。

我遇到的问题是，当我点击展开时，浏览器会转到屏幕的顶部，而不是保持原位。

我的代码看起来大致是这样的：

<body> 

    <script type="text/javascript"> 

    function toggleView(id, link) { 
    var e = document.getElementById(id); 

    if (e.style.display == '') { 
     e.style.display = 'none'; 
     link.innerHTML = '(+)'; 
    } else { 
     e.style.display = ''; 
     link.innerHTML = '(-)'; 
    } 
    } 

    </script> 

    <br> 
    <br> 
    <br> 
    <br> 
    <br> 

    This is my headline <a href="#" onclick="toggleView('content', this)">(+)</a> 

    <div id="content" style="display:none"> 
    This is my detailed content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum. 
    </div> 

    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    &nbsp; 

    </body>

可这在纯CSS来实现或者是它更好地使用JavaScript？

对不起，新手问题，但我找不到答案在别处。

来源

2014-06-15 user2240198

卸下'HREF = “＃”'。这导致浏览器跳转到该页面的顶部的锚点。而是使用'href =“javascript：void（0）;”' – Max

太棒了！很容易当你知道如何:) 非常感谢 J – user2240198

这可以使用JQuery轻松完成。

$("#content").slideToggle();

来源

2014-06-15 17:11:19 javadg

为您的代码，你可以使用：代替

href="javascript:void(0);"

：

href="#"

但这里是一个简单的例子为您服务！

<div class="example2"> 
    <p>Text Here.</p> 
</div> 

$(document).ready(function() { 
    $('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>'); 
    $('a#toggle-example2').click(function() { 
     $('.example2').slideToggle(1000); 
     return false; 
    }); 
});

的jsfiddle：

link

来源

2014-06-15 17:15:08

在HTML页面上展开/折叠行最简单的方法是什么？

回答

相关问题