根据脚本状态（展开或折叠）更改文本

我试图根据静态“显示/隐藏公告”标题是否折叠或展开来动态地“显示公告”或“隐藏公告”。目前它只是显示“显示/隐藏公告”，无论内容是折叠还是展开，我想将其更改为动态。根据脚本状态（展开或折叠）更改文本

我的代码：

<div class="collapsibleContainer" title="Show/Hide Announcement"> 
     <img src="images/announce.jpg" /> 
    </div>

我的脚本：

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $(".collapsibleContainer").collapsiblePanel(); 
    }); 
</script> 
<script> 
(function($) { 
    $.fn.extend({ 
     collapsiblePanel: function() { 
     // Call the ConfigureCollapsiblePanel function for the selected element 
     return $(this).each(ConfigureCollapsiblePanel); 
    } 
    }); 
})(jQuery); 


function ConfigureCollapsiblePanel() { 
    $(this).addClass("ui-widget"); 

    // Check if there are any child elements, if not then wrap the inner text within a new div. 
    if ($(this).children().length == 0) { 
    $(this).wrapInner("<div></div>"); 
    }  

    // Wrap the contents of the container within a new div. 
    $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>"); 

    // Create a new div as the first item within the container. Put the title of the panel in here. 
    $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this)); 



    // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div. 
    $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick); 
} 


function CollapsibleContainerTitleOnClick() { 
    // The item clicked is the title div... get this parent (the overall container) and toggle the content within it. 
    $(".collapsibleContainerContent", $(this).parent()).slideToggle(); 
} 

</script>

我的CSS：

.collapsibleContainer 
{ 
    margin: 0 auto; 
    width: 550px; 
    padding-bottom: 10px; 

} 

.collapsibleContainerTitle 
{ 
    cursor:pointer; 
} 

.collapsibleContainerTitle div 
{ 
    padding-top:5px; 
    padding-left:10px; 
    color:#FFFFFF; 
    font-family: 'Capriola'; 
    font-weight: 400; 
    background-images: url(images/bg.png); 
}

我更新的CSS展现透明度，但改变文本。我只想要背景和边框淡出。悬停是在1.0：

.collapsibleContainerTitle div 
{ 
    padding-top:5px; 
    padding-left:10px; 
    color:#FFFFFF; 
    font-family: 'Capriola'; 
    font-weight: 400; 
    background-images: url(images/bg.png); 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

.collapsibleContainerTitle div:hover 
{ 
    padding-top:5px; 
    padding-left:10px; 
    color:#FFFFFF; 
    font-family: 'Capriola'; 
    font-weight: 400; 
    background-images: url(images/bg.png); 
opacity:1.0; 
filter:alpha(opacity=100); /* For IE8 and earlier */ 
}

来源

2012-08-15 Interfaith

事情是这样的：

function CollapsibleContainerTitleOnClick() { 
    $(".collapsibleContainerContent", $(this).parent()).slideToggle(function() { 
     $(".collapsibleContainerTitle", $(this).parent()).children(':first') 
      .text($(this).is(':visible')?'Hide Announcement':'Show Announcement'); 
    }); 
}

FIDDLE

来源

2012-08-15 17:50:22 adeneo

谢谢..这就像一个魅力 – Interfaith 2012-08-15 18:47:09

也如果你可以帮助我进一步了解它。不透明度悬停应该是1.0，当鼠标不在DIV上时，我希望不透明度很低，因此不会突出。仅限背景图片。对此有何帮助？ – Interfaith 2012-08-15 18:50:50

@Interfaith - 不知道我明白了，像[this]（http://jsfiddle.net/7WKXm/2/）？ – adeneo 2012-08-15 18:54:16

你必须移动这个脚本块

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $(".collapsibleContainer").collapsiblePanel(); 
    }); 
</script>

脚本的第二块以下。

这里是小提琴：

http://jsfiddle.net/EWJby/

来源

2012-08-15 17:49:05 Vlad

这是一个很好的编辑，以及。谢谢 – Interfaith 2012-08-15 18:47:57

根据脚本状态（展开或折叠）更改文本

回答

相关问题