[英]jquery content toggle using .slideToggle()
I'm making a content toggle using jquery and I don't know what to do next, I want the content toggle have an icon (-) when the toggle is open and (+) icon when the toggle is closed the problem is I don't know how to achieve it here's my code: 我正在使用jquery进行内容切换,我不知道接下来该做什么,我希望内容切换在切换打开时有一个图标( - ),当切换关闭时,(+)图标问题是我不知道如何实现它是我的代码:
HTML HTML
<div id="pane" class="menu_list">
<p class="menu_head">Header-1</p>
<div class="menu_body" style="background:#999;">
the quick brownn fox jumps over the lazy dog
</div>
</div>
Jquery jQuery的
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#pane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(minus.png)"}).next("div.menu_body").slideToggle(300);
});
Css CSS
.menu_list {
width: 100%;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #eef4d3 url(plus.png) center right no-repeat;
}
.menu_body {
display:none;
}
Use .toggleClass(class1,class2)
to accomplish your task. 使用.toggleClass(class1,class2)
来完成任务。 Please read here to know more. 请在此阅读以了解更多信息。
Try, 尝试,
$("#pane p.menu_head").click(function(){
$(this).toggleClass("plus minus").next("div.menu_body").slideToggle(300);
});
and CSS 和CSS
.minus{ background-image:url(minus.png); }
.plus{ background-image:url(plus.png); }
Add a new span in the header to hold the +/-
then toggle it in the click hanlder 在标题中添加新的span以保持+/-
然后在click hanlder中切换它
<div id="pane" class="menu_list">
<p class="menu_head">Header-1<span>+</span>
</p>
<div class="menu_body" style="background:#999;">
the quick brownn fox jumps over the lazy dog
</div>
</div>
then 然后
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#pane p.menu_head").click(function () {
$(this).css({
backgroundImage: "url(minus.png)"
}).next("div.menu_body").slideToggle(300);
$(this).find('span').text(function (_, text) {
return text == '+' ? '-' : '+'
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.