单击链接时尝试将css应用于jQuery slideToggle答案

【问题标题】：Trying to apply css to jQuery slideToggle when links are clicked单击链接时尝试将css应用于jQuery slideToggle
【发布时间】：2011-12-11 03:12:29
【问题描述】：

有一系列列表，我正在尝试使用 jQuery slideToggle 显示/隐藏，并且需要对在单击后显示/隐藏的超链接应用不同的 css 样式，然后切换回再次单击它们后的原始样式。把这个例子看成资源：http://papermashup.com/jquery-show-hide-plugin/

在下面的sn-ps中，有以下内容：

$(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 运行时错误：对象不支持此属性或方法”并且显示/隐藏停止工作。

还尝试在点击时切换类：

$('#toggleDiv').toggleClass('show_hideClose', $(this).is(':visible'));

其中 show_hideClose 本质上是下面 sn-ps 中 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 说我缺少一个 ) ，但我没有。 Visual Studio 告诉我：“Microsoft JScript 运行时错误：对象不支持此属性或方法”。

【问题讨论】：

标签： c# jquery .net css slidetoggle

【解决方案1】：

这通常是更改 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)

【讨论】：

谢谢，迪迪埃。出于某种原因，我需要使用 class="show_hide" 来显示和隐藏额外的内容，否则显示/隐藏功能会中断。我确实尝试使用具有相同属性和不同图像的两个不同类，但问题是：当我尝试为每个超链接设置唯一 ID（它们在转发器中）时，显示/隐藏中断。所以...我找到了一个目前有效的解决方案，并将在上面发布。

【解决方案2】：

好的...看起来语法和引号在这里起了很大的作用。这似乎有效：

$(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)');

为自己没有早点尝试而自责。

【讨论】：