显示更多/显示更少 JavaScript 无法正常工作答案

【问题标题】：Show More / Show Less JavaScript not working properly显示更多/显示更少 JavaScript 无法正常工作
【发布时间】：2026-02-17 10:00:01
【问题描述】：

我试图在选择“显示更多”链接时显示 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

【问题讨论】：

试试这个jsfiddle.net/ry5jLcmm/8

标签： javascript html show

【解决方案1】：

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

#message {
    display: none;
}

使用上述，元素将默认隐藏。所以，我猜你的代码现在可以工作了，但我会把它改成这样：

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

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

【讨论】：

【解决方案2】：

试试这个 JS：

$('#hideshow').click(function(event) {
   event.preventDefault()

   if($('#hideshow').text() == 'Show'){
      $('#hideshow').text('Hide');
      $('#message').show();
   }
   else{
      $('#hideshow').text('Show');
      $('#message').hide();
   }
});

还有这个css：

#message {
   display: none;
}

【讨论】：

这非常有效。另一个问题是，当我将“显示”一词加粗时，它会在第一次单击时变为常规字体，然后在第二次单击时发生动作。你知道我怎样才能使 javascript 中的结果变为粗体，以便操作可以在第一次点击时起作用吗？
将此添加到 CSS：#message { display: none;字体粗细：粗体； }

【解决方案3】：

您可以使用类来隐藏div，然后使用jQuery 的toggleClass 方法来打开/关闭该类。

所以在你的 CSS 中：

.is-hidden {
    display: none;
}

然后是你的 HTML：

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

然后是你的 jQuery：

$('#message').click(function () {
    $(this).toggleClass('is-hidden');
});

【讨论】：