Javascript 单击图示符图标时如何显示文本

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

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

以下是我的代码：

jQuery:

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

    });
  });
});

<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>

.hidden{
    display:none;
}

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

HTML:

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

    });
  });
});

<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>

.hidden{
    display:none;
}

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

单击右侧图示符箭头后，将显示此文本。

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

---

在此方面的任何帮助都将不胜感激。谢谢大家!

请试试这个

div {
  display: none;
}

CSS:

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

    });
  });
});

<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>

.hidden{
    display:none;
}

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

HTML:

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

    });
  });
});

<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>

.hidden{
    display:none;
}

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

单击右侧图示符箭头后，将显示此文本。

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

---

您没有提供CSS，因此很难诊断问题

然而，像这样的东西应该满足你的需要

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

虽然我建议你从

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

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

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

请勾选此项

将div的类添加为name

showtext

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

---

只需将div标记替换为以下内容：

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

单击右侧图示符箭头后，将显示此文本。

切换类

可以接受多个类，使用

滑动切换

比

动画

更容易：-

$(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;
}

---

您可以在不使用jQuery的情况下获得相同的行为，只需使用css即可。 使用

输入[type=checkbox]

，使用

标签

。它更灵活，因为您还可以使用

转换

，并且不意味着依赖关系（如

jQuery

）

---

只有使用

css

才能在jsfiddle中添加代码？@HarshSanghani：或者更好的方法是，在站点上这里添加一个堆栈片段（

工具栏按钮）。旁注：您可以同时切换多个类：

.toggleClass（“Glypicon-arrow-right-Glypicon-down”）

只需将div标记替换为“单击右侧图示符箭头后将显示此文本”。您还可以根据此功能使用Jquery UI。参考链接，谢谢你的朋友！现在可以了。我很惊讶知道如何让这件事工作，在不止一种方式（在看了其他评论后）。再次感谢您，祝您愉快！（：感谢您回复演示。非常感谢。我的糟糕之处在于我没有添加任何CSS。顺便说一句，感谢您的回复。现在效果很好。棒极了！我从来没有想过我可以使用CSS来完成此任务。谢谢！np，

CSS

非常棒，没有

js

，您可以做很多事情。