如何在单击字形时显示文本

Question

我需要一个＆＃34;右边的字形箭头＆＃34;并且标题出现在屏幕上并且在点击时，它应该变成＆＃34;向下字形箭头＆＃34;并显示一些文字。同样，当单击向下箭头时，文本应该消失，箭头应该更改为右图标。

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

以下是我的代码：

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

Answer 2

toggleClass可以接受多个课程，使用slideToggle比animate更容易： -

$(document).ready(function() {
  $("#menu-toggle").click(function() {
    $(this).find('i').toggleClass('glyphicon-arrow-right, glyphicon-arrow-down');
    $(this).next('div').slideToggle();
  });
});

<强> CSS

div {
  display: none;
}

Answer 3

您还没有提供CSS，这使得很难诊断问题。

但是，这样的事情应该做你需要的事情;

#menu-toggle + div{
    height:0;
    overflow:hidden;
}

虽然我建议您只需使用

启动div

#menu-toggle + div{
    display:none;
}

并在div上使用fadeIn（）或slideDown（）的JQuery动画。

如果这些下拉列表中有缺陷，您当然应该按类而不是按ID进行选择。

Answer 4

选中 Demo

将div的类添加为名称showtext

$('.showtext').hide();

Answer 5

只需用以下内容替换你的div标记：

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

Answer 6

您只需使用jQuery即可获得相同的行为 css。 使用input[type=checkbox]，label。它更灵活，因为您也可以使用transitions并且不暗示依赖（例如jQuery）。

Here is de demo仅使用css。