jQuery 隐藏和显示带有加号和减号图标的切换 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14186565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery hide and show toggle div with plus and minus icon
提问by Paul
I have the code working for the show and hide the div. How would I add two different icons as a sprite image for when the show and hide are active?
我有为节目工作的代码并隐藏div. 当显示和隐藏处于活动状态时，如何添加两个不同的图标作为精灵图像？
For example: +icon for show me, then a -icon for hide me.
例如：+图标显示我，然后-图标隐藏我。
Here is the code, I have: http://jsfiddle.net/BLkpG/
这是代码，我有：http: //jsfiddle.net/BLkpG/
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Need to change image to the above when toggled to a +or -.
切换到+或-时需要将图像更改为上面的图像。
Thanks
谢谢
回答by Enve
Try something like this
尝试这样的事情
jQuery
jQuery
$('#toggle_icon').toggle(function() {
$('#toggle_icon').text('-');
$('#toggle_text').slideToggle();
}, function() {
$('#toggle_icon').text('+');
$('#toggle_text').slideToggle();
});
HTML
HTML
<a href="#" id="toggle_icon">+</a>
<div id="toggle_text" style="display: none">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
回答by Vytautas Butkus
I would say the most elegant way is this:
我会说最优雅的方式是这样的：
<div class="toggle"></div>
<div class="content">...</div>
then css:
然后CSS：
.toggle{
display:inline-block;
height:48px;
width:48px; background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle.expanded{
background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}
and js:
和js：
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
回答by Roko C. Buljan
Toggle the text Showand Hideand move your backgroundPositionYaxis
切换文本Show并Hide移动backgroundPositionY轴
$(function(){ // DOM READY shorthand
$(".slidingDiv").hide();
$('.show_hide').click(function( e ){
// e.preventDefault(); // If you use anchors
var SH = this.SH^=1; // "Simple toggler"
$(this).text(SH?'Hide':'Show')
.css({backgroundPosition:'0 '+ (SH?-18:0) +'px'})
.next(".slidingDiv").slideToggle();
});
});
CSS:
CSS：
.show_hide{
background:url(plusminus.png) no-repeat;
padding-left:20px;
}
回答by Bram Vanroy
Here is a quick edit of Enve's answer. I do like roXor's solution, but background images are not necessary. And everbody seems to forgot a preventDefaultas well.
这是 Enve 答案的快速编辑。我确实喜欢 roXor 的解决方案，但不需要背景图像。每个人似乎也忘记了preventDefault。
$(document).ready(function() {
$(".slidingDiv").hide();
$('.show_hide').click(function(e) {
$(".slidingDiv").slideToggle("fast");
var val = $(this).text() == "-" ? "+" : "-";
$(this).hide().text(val).fadeIn("fast");
e.preventDefault();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="show_hide">+</a>
<div class="slidingDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
</div>回答by fdiv_bug
this works:
这有效：
CSS:
CSS：
.show_hide {
display:none;
}
.plus:after {
content:" +";
}
.minus:after {
content:" -";
}
jQuery:
jQuery：
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").addClass("plus").show();
$('.show_hide').toggle(
function(){
$(".slidingDiv").slideDown();
$(this).addClass("minus");
$(this).removeClass("plus");
},
function(){
$(".slidingDiv").slideUp();
$(this).addClass("plus");
$(this).removeClass("minus");
}
);
});
HTML:
HTML：
<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv" style="display: block;">
Check out the updated jQuery plugin for doing this: <a href="http://papermashup.com/jquery-show-hide-plugin/" class="show_hide" target="_blank" style="display: inline;">jQuery Show / Hide Plugin</a>
</div>
in the CSS, instead of content:" +";You can put an background-image(with background-position:right center;and background-repeat:no-repeatand maybe making the .show_hidedisplayed as block and give him a width, so that the bg-image is not overlayed by the link-text itself).
在 CSS 中，content:" +";您可以放置一个background-image(with background-position:right center;andbackground-repeat:no-repeat并且可能使.show_hide显示为块并给他一个宽度，以便 bg-image 不会被链接文本本身覆盖)。
回答by blackandorangecat
Here is an example of how to do it with an arrow instead of a +and -. This uses jQueryto change classes on the element, and CSSto style the arrow.
这是一个如何使用箭头而不是+和的示例-。这用于jQuery更改元素上的类，并CSS设置箭头的样式。
$(".toggleHide").click(function() {
$(".elementToHide").slideToggle("fast");
$(this).find("i").toggleClass("down up");
});i {
border: solid black;
border-width: 0 5px 5px 0;
display: inline-block;
padding: 5px;
-webkit-transition-duration: 1s;
/* Safari */
transition-duration: 1s;
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="toggleHide"><i class="down"></i></h3>
<aside class="elementToHide">
Content to hide
</aside>回答by Bravo
HTML:
HTML：
<div class="Settings" id="GTSettings">
<h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>General Theme Settings</h3>
<div class="options">
<table>
<tr>
<td>
<h4>Back-Ground Color</h4>
</td>
<td>
<input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly">
</td>
</tr>
<tr>
<td>
<h4>Text Color</h4>
</td>
<td>
<input type="text" id="body-fontColor" class="themeselector" readonly="readonly">
</td>
</tr>
</table>
</div>
</div>
<div class="Settings" id="GTSettings">
<h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
<div class="options">
<table>
<tr>
<td>
<h4>Back-Ground Color</h4>
</td>
<td>
<input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly">
</td>
</tr>
<tr>
<td>
<h4>Text Color</h4>
</td>
<td>
<input type="text" id="body-fontColor" class="themeselector" readonly="readonly">
</td>
</tr>
</table>
</div>
</div>
JavaScript:
JavaScript：
$(document).ready(function() {
$(".options").hide();
$(".SettingsTitle").click(function(e) {
var appThemePath = $("#appThemePath").text();
var closeMenuImg = appThemePath + '/images/toggle-collapse-light.gif';
var openMenuImg = appThemePath + '/images/toggle-collapse-dark.gif';
var elem = $(this).next('.options');
$('.options').not(elem).hide('fast');
$('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
elem.toggle('fast');
var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ? openMenuImg : closeMenuImg;
$(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);
});
});
