試圖應用CSS jQuery slideToggle點擊鏈接時

Question

有一系列的列表，我試圖顯示/隱藏使用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運行時錯誤：對象不支持此屬性或方法」並顯示/隱藏停止工作。

也試圖與切換上點擊類：

$('#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> 

UPDATE：

試過使用：

$(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運行時錯誤：對象不支持此屬性或方法」。

Answer 1

這通常是正確的語法更改背景圖片的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) 

Answer 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)'); 

踢自己不要嘗試更早。