[英]Trying to apply css to jQuery slideToggle when links are clicked
我嘗試使用jQuery slideToggle來顯示/隱藏一系列列表,並且需要對單擊顯示/隱藏后的超鏈接應用不同的CSS樣式,然后再切換回原始樣式一旦再次單擊它們。 將此示例視為資源: http : //papermashup.com/jquery-show-hide-plugin/
在以下代碼段中,包含以下內容:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
使用以下內容進行了嘗試,並且有效:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ backgroundColor: '#399C05' }) : toggleClick.text(options.showText).css({ backgroundColor: '#FFFFFF' });
但是我需要更改css中的背景圖像而不是像這樣的背景顏色:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ background: url(/images/icon_image1.gif) }) : toggleClick.text(options.showText).css({ url(/images/icon_image1.gif) });
但是,這顯示“ Microsoft JScript運行時錯誤:對象不支持此屬性或方法”,並且show / hide停止工作。
還嘗試使用以下命令在click上切換類:
$('#toggleDiv').toggleClass('show_hideClose', $(this).is(':visible'));
其中,show_hideClose本質上是下面的片段中show_hide的副本,這導致上面的錯誤。
所以我有:
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'View Available Programs', // the button text to show when a div is closed
hideText: 'Hide Program Listing' // the button text to show when a div is open
});
和
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1) {
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
//$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ backgroundColor: '#399C05' }) : toggleClick.text(options.showText).css({ backgroundColor: '#FFFFFF' }); //<-This works with background colors but not with background url
}
});
return false;
});
};
})(jQuery);
超級鏈接位於.NET C#轉發器內,並包含轉發器:
<asp:Repeater ID="rptMyContentGroups" runat="server" OnItemDataBound="rptMyContentGroups_OnItemDataBound">
<ItemTemplate>
<a href="#" id="blah" class="show_hide" rel='# <%=rptmyContent.ClientID%>_programList_<%# GetDivClass() %>'>View</a>
<div id="programList" runat="server" style="display: none;">
<asp:Repeater ID="rptMyContent" runat="server" OnItemDataBound="rptMyContent_OnItemDataBound">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="hypContentDetail" runat="server" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
更新:
嘗試使用:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css('background-image', 'url("' + /images/icon_a.gif + '")') : toggleClick.text(options.showText).css('background-image', 'url("' + /images/icon_b.gif + '")');
IE說我想念a),但我不是。 Visual Studio告訴我:“ Microsoft JScript運行時錯誤:對象不支持此屬性或方法”。
通常,這是更改background-image css屬性的正確語法:
$(toggleDiv).is(":visible")
? toggleClick
.text(options.hideText)
.css('background-image', 'url(/images/icon_image1.gif)')
: ...
但我強烈建議您在插件中添加一個選項,並使用addClass / removeClass。 這將使您的插件更具可定制性,而無需在代碼中對圖像的URL進行硬編碼。
// pass the option
$('.show_hide').showHide({
...
showText: 'View Available Programs',
hideText: 'Hide Program Listing',
hideClass: 'myClassForHide'
});
// use it in your toggle
$(toggleDiv).is(":visible")
? toggleClick
.text(options.hideText)
.addClass(options.hideClass)
: toggleClick
.text(options.hideText)
.removeClass(options.hideClass)
好的...看起來語法和引號在這里有所不同。 這似乎可行:
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css('background-image', 'url(/images/image1.gif)') : toggleClick.text(options.showText).css('background-image', 'url(/images/image2.gif)');
踢自己不早嘗試。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.