私はショーのために働くコードを持っていて、div. 表示と非表示がアクティブな場合に、スプライト イメージとして 2 つの異なるアイコンを追加するにはどうすればよいですか?
例: +アイコンで表示し、次に-アイコンで非表示にします。
私が持っているコードは次のとおりです。 http://jsfiddle.net/BLkpG/
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
+または-に切り替えると、画像を上のように変更する必要があります。
ありがとう
このようなことを試してください
jQuery
$('#toggle_icon').toggle(function() {
$('#toggle_icon').text('-');
$('#toggle_text').slideToggle();
}, function() {
$('#toggle_icon').text('+');
$('#toggle_text').slideToggle();
});
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>
最もエレガントな方法はこれだと思います：
<div class="toggle"></div>
<div class="content">...</div>
次に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");
}
およびjs：
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
Showテキストを切り替えて、 Y軸Hideを移動しますbackgroundPosition
$(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：
.show_hide{
background:url(plusminus.png) no-repeat;
padding-left:20px;
}
Enveの回答の簡単な編集を次に示します。私はroXorのソリューションが好きですが、背景画像は必要ありません. そして、誰もがaも忘れているよう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>これは機能します：
CSS:
.show_hide {
display:none;
}
.plus:after {
content:" +";
}
.minus:after {
content:" -";
}
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:
<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>
CSS では、代わりに をcontent:" +";配置できますbackground-image( background-position:right center;andbackground-repeat:no-repeatを.show_hideブロックとして表示し、bg-image が link-text 自体によってオーバーレイされないように幅を与えることもできます)。
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:
$(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);
});
});