隐藏/显示菜单Javascript
我想制作一个菜单,点击标题显示内容。 我想让它酷似一个在下面谷歌的检查元素: 隐藏/显示菜单Javascript
我设法写代码:
<script>
$("label").click(function() {
$("p").slideToggle("fast");
if ($((this).html).find('▶'));
{
document.getElementById("lbl_name").innerHTML = '▼' + document.getElementById("lbl_name").innerHTML.substring(1);
}
else if ($((this).html).find('▼'));
{
document.getElementById("lbl_name").innerHTML = '▶' + document.getElementById("lbl_name").innerHTML.substring(1);
}
});
的& 96 ...是正确的,并向下箭头
但是我遇到了这个代码的问题: 1-它不起作用,在第一次改变箭头后它不起作用再次更改它。
2 - 我不想和元素ID来工作中的作用,是因为我希望它与许多文本的不只是一个工作,所以我想它例如与函数的调用者的工作改变这一切的,而不是段落标签。
的HTML:
<label id="lbl_name">▶Toggle</label>
<p>
This is the paragraph.
</p>
HTML:
<label><span>▶</span>Click Me</label>
<p class="p">this is a sample text..</p>
CSS:
<style>
.p {
display: none;
}
</style>
的javascript://如果您有jQuery的早于1.9,您可以使用toggle
<script>
$(function(){
$("label").toggle(function(){
$(this).find("span").html('▼');
$(this).next("p").slideDown(500);
},function(){
$(this).find("span").html('▶');
$(this).next("p").slideUp(500);
});
});
</script>
感谢,但我不能得到它的工作,我添加了HTML,CSS和JS,但是当我点击文本段落不会出现。 – 2013-04-07 12:53:50
我做了类似的事情......尝试捕捉事件内部要做的事情。为了不使用ID,请尝试使用类这一翻译或只是.next()
jQuery函数像我一样:
$('p > .arrow').on('click', function(e) {
var $el = $(e.target);
if($el.hasClass('arrow-right')) { // so this is hide! show it
$el.next('p').slideDown('fast');
$el.removeClass('arrow-right');
$el.addClass('arrow-down');
}
else { // is visible, hide it
$el.next('p').slideUp('fast');
$el.addClass('arrow-right');
$el.removeClass('arrow-down');
}
});
你的HTML必须是这样的:
<p>
<span class="arrow arrow-right"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp
<p><span class="arrow arrow-right"></span>Lorem ipsum dolor sit amet, consect</p>
</p>
请给我举个例子,因为我只是一个初学者,我不知道该把这些课放在哪里。 – 2013-04-07 12:54:20
请参阅上面的HTML示例 – silviomoreto 2013-04-08 10:38:39
什么是你的(相关/ [SSCCE(HTTP: //sscce.org/))HTML?你可以[显示一个演示](http://jsfiddle.net/)你已经有了什么? – 2013-04-07 11:15:52
我添加了html。 – 2013-04-07 12:56:51