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");
    } 
});

Answer 2

您可以使用类来隐藏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');
});

Answer 3

试试这个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无法正常工作

3 个答案: