javascript - 单击字形图标时如何显示文本

Question

我需要一个“右字形箭头”和一个标题出现在屏幕上，点击后，它应该变成“下字形箭头”并显示一些文本。同样，当单击向下箭头时，文本应该消失并且箭头应该变为右图标。

请查看屏幕截图以帮助您更好地理解。

以下是我的代码:

jQuery:

$(document).ready(function() {
  $("#menu-toggle").click(function() {
    $(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-down');
    $("div").animate({
      height: 'toggle'

    });
  });
});

HTML:

<a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i> </a>

<div>This text appears once the right glyph arrow is clicked.</div>

我的代码的问题是，它会在页面加载后显示正确的字形和文本。我只希望首先显示正确的图标，一旦单击它，文本就会出现。

如有任何帮助，我们将不胜感激。谢谢你!

Answer 1

请试试这个

CSS:

.hidden{
    display:none;
}

HTML:

<div class="hidden">This text appears once the right glyph arrow is clicked.</div>

首先它应该是隐藏的，所以添加“隐藏”类来应用样式。

Fiddle Demo