在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頁面上展開/摺疊行最簡單的方法是什麼？

回答

相關問題