0

折りたたまれているか展開されているかに基づいて、静的な「お知らせの表示/非表示」タイトルを動的に「お知らせの表示」または「お知らせの非表示」に変更しようとしています。現在、コンテンツが折りたたまれているか展開されているかに関係なく、「お知らせの表示/非表示」を表示するだけで、動的に変更したいと考えています。

私のコード:

    <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 */
}
4

2 に答える 2

1

このスクリプト ブロックを移動する必要があります

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

スクリプトの 2 番目のブロックの下。

ここにフィドルがあります：

http://jsfiddle.net/EWJby/

于 2012-08-15T17:49:05.680 に答える
1

このようなもの：

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

フィドル

于 2012-08-15T17:50:22.383 に答える