javascript - 显示更多/显示更少 JavaScript 无法正常工作

Question

我试图在选择“显示更多”链接时显示 div 标签。到目前为止，div 在页面加载时出现，这是我不想要的。然后，当我选择“显示”链接时，div 消失。我需要发生相反的情况，然后当我再次选择链接时使 div 消失。

这是我的 HTML:

<div class="VideoText" align="left">
<a href=""><span> <strong> Credits </strong> </span></a> 
<br> Directed By: <a href="#"> Link One </a>
<br> Edited   By: <a href="#"> Link Two </a>
<br>

<a href="#" id="hideshow">Show</a>

<div id="message">
    Credit: <a href="#"> Link Three </a> <br>
    Credit: <a href="#"> Link Four </a>  <br>

</div>
</div>

这是我的 .js 文件:

$('#hideshow') .click(function() {
    $('#hideshow') .text('Hide');
    $('#message') .show();
    }, function() {
    $('#hideshow').text('Show');
    $('#message') .hide();

});

我觉得我只是将一些代码放在了错误的位置。

这是我尝试让代码正常工作的页面: http://www.kingdombrand.com/Film/Alek/Films/TestFilm

Answer 1

我个人会用 CSS 隐藏 #message 元素:

#message {
    display: none;
}

使用上面的方法，该元素将默认隐藏。所以，我猜你的代码现在可以工作了，但我会把它稍微改变一下，如下所示:

$('#hideshow').click(function() {
    $('#message').toggle();

    if ($(this).text() == 'Show') {
        $(this).text("Hide");
    else
        $(this).text("Show");
    } 
});