Manual:Collapsible elements/zh

	My infobox with collapsible info
Title	Sample
Lorem	Ipsum
1	A
2	B
3	C

This page is a translated version of the page Manual:Collapsible elements and the translation is 47% complete.

Other languages:

English • ‎dansk • ‎español • ‎中文 • ‎日本語

jQuery.makeCollapsible

See also jQuery.makeCollapsible documentation for more information about how it works.

See also: Manual:Collapsible elements/Demo/Advanced for more examples.

This module is in MediaWiki core by default as of MediaWiki 1.18 and higher. Add the class mw-collapsible to any element (div, table, list, anything) to trigger it.

For previous versions of MediaWiki, there are a few alternatives referenced below:

Collapsible tables: Add a simple class to make a table collapsible
NavFrame: A small element framework to set up a collapsible structure around any arbitrary content

示例

Simple

<!-- overflow:auto; to fix collapsed display, because the toggle link has float:right; -->
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
This text is collapsible. {{Lorem}}
</div>

结果：

This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Using the data-collapsetext and data-expandtext attributes one can define a custom text for the toggle labels added by the script. When added in wikitext these could be populated by a localized message like:

<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">

Simple with title

<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Lorem ipsum sample</div>
<div class="mw-collapsible-content">
This text is collapsible. {{Lorem}}
</div></div>

结果：

Lorem ipsum sample

This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table

A table can be collapsed like any other element. The difference is that part of the table remains visible, even when collapsed. A table with a caption keeps the caption visible. A table without a caption keeps the first row visible.

{| class="mw-collapsible"
|+ Caption
|-
! scope="col" | Header 1
! scope="col" | Header 2
|-
| Data 1
| Data 2
|}

{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum
|-
| dolor
| sit
|}

结果：

Caption
Header 1	Header 2
Data 1	Data 2

Lorem

ipsum

dolor

sit

With specified initial state

You can add mw-collapsed after mw-collapsible to have the content collapsed by default when you load the page.

To set the initial state as collapsed add "mw-collapsed", such as seen in the following table:

{| class="mw-collapsible mw-collapsed wikitable"
! The header || remains visible
|-
| This  content || is hidden
|-
| at first || load time
|}

The Header	remains visible
This content	is hidden
at first	load time

With specified collapsible part

By default, a collapsible non-table element collapses completely.

To keep some content visible, even when collapsed, you can specify which part is the collapsible content.

<div class="toccolours mw-collapsible mw-collapsed">
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>

结果：

This text is not collapsible; but the next is collapsible and hidden by default:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

With custom toggle link

If you don't want the script to put the default toggle link (whether or not with a custom label) in your element, you can make one of your own. This could reside anywhere inside or outside the collapsible element. Its relationship to the collapsible element is detected by using an ID attribute with the prefix mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.

<span class="mw-customtoggle-myDivision">Toggle link</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">Toggled text</div>
<span class="mw-customtoggle-myDivision">Additional toggle link</span>

结果：

Toggle link

Toggled text

Additional toggle link

As part of an infobox

You can also use collapsible elements in infoboxes, such as seen in the example on the right.

Move toggle link to the left

Wide images and long bare URLs in collapsible tables or elements can cause the toggle link to go offscreen to the right when expanded. In cell phones for example. Sometimes it is difficult or impossible to get over to the toggle link to click it and close it. The following CSS puts the toggle link all the way to the left, and leaves a little space between it and the text to its right. The toggle link position does not change as the table or element is expanded or collapsed.

/* Collapsible elements. Toggle-link moved to left.
/* Margin around it adjusted. */

.mw-collapsible .mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}

Source

This module ships with MediaWiki by default. You don't need to copy it to a wiki. The source (if you're interested) is in the repository for mediawiki-core (resources/src/jquery/jquery.makeCollapsible.js and resources/src/jquery/jquery.makeCollapsible.css).

NavFrame

MediaWiki版本：

≤ 1.18

Wikipedia: See Help:Collapsing on Wikipedia

Example

<div class="NavFrame">
<div class="NavHead">'''Title 1'''</div>
<div class="NavContent">
Hello world.
</div>
</div>


<div class="NavFrame">
<div class="NavHead">'''Title 2'''</div>
<div class="NavContent" style="display: none;">
Hello world.
</div>
</div>

结果：

Title 1

Hello world.

Title 2

Source

参见: MediaWiki:Gadget-NavFrame.js

Copy and paste the following text into your wiki's MediaWiki:Common.js and MediaWiki:Common.css

JavaScript

/**
 * Dynamic Navigation Bars. See [[Wikipedia:NavFrame]]
 * 
 * Based on script from en.wikipedia.org, 2008-09-15.
 *
 * @source www.mediawiki.org/wiki/MediaWiki:Gadget-NavFrame.js
 * @maintainer Helder.wiki, 2012–2013
 * @maintainer Krinkle, 2013
 */
( function () {

// Set up the words in your language
var collapseCaption = 'hide';
var expandCaption = 'show';

var navigationBarHide = '[' + collapseCaption + ']';
var navigationBarShow = '[' + expandCaption + ']';

/**
 * Shows and hides content and picture (if available) of navigation bars.
 *
 * @param {number} indexNavigationBar The index of navigation bar to be toggled
 * @param {jQuery.Event} e Event object
 */
function toggleNavigationBar( indexNavigationBar, e ) {
	var navChild,
		navToggle = document.getElementById( 'NavToggle' + indexNavigationBar ),
		navFrame = document.getElementById( 'NavFrame' + indexNavigationBar );

	// Prevent browser from jumping to href "#"
	e.preventDefault();

	if ( !navFrame || !navToggle ) {
		return false;
	}

	// If shown now
	if ( navToggle.firstChild.data === navigationBarHide ) {
		for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
			if ( $( navChild ).hasClass( 'NavContent' ) || $( navChild ).hasClass( 'NavPic' ) ) {
				navChild.style.display = 'none';
			}
		}
		navToggle.firstChild.data = navigationBarShow;

	// If hidden now
	} else if ( navToggle.firstChild.data === navigationBarShow ) {
		for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
			if ( $( navChild ).hasClass( 'NavContent' ) || $( navChild ).hasClass( 'NavPic' ) ) {
				navChild.style.display = 'block';
			}
		}
		navToggle.firstChild.data = navigationBarHide;
	}
}

/**
 * Adds show/hide-button to navigation bars.
 *
 * @param {jQuery} $content
 */
function createNavigationBarToggleButton( $content ) {
	var i, j, navChild, navToggle, navToggleText, isCollapsed,
		indexNavigationBar = 0;
	// iterate over all < div >-elements
	var $divs = $content.find( 'div.NavFrame' );
	$divs.each( function ( i, navFrame ) {
		indexNavigationBar++;
		navToggle = document.createElement( 'a' );
		navToggle.className = 'NavToggle';
		navToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
		navToggle.setAttribute( 'href', '#' );
		$( navToggle ).on( 'click', $.proxy( toggleNavigationBar, null, indexNavigationBar ) );

		isCollapsed = $( navFrame ).hasClass( 'collapsed' );
		// backwards compatibility for old technique where the collapsed class was not yet used
		for ( navChild = navFrame.firstChild; navChild !== null && !isCollapsed; navChild = navChild.nextSibling ) {
			if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
				if ( navChild.style.display === 'none' ) {
					isCollapsed = true;
				}
			}
		}
		if ( isCollapsed ) {
			for ( navChild = navFrame.firstChild; navChild !== null; navChild = navChild.nextSibling ) {
				if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
					navChild.style.display = 'none';
				}
			}
		}
		navToggleText = document.createTextNode( isCollapsed ? navigationBarShow : navigationBarHide );
		navToggle.appendChild( navToggleText );

		// Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
		for ( j = 0; j < navFrame.childNodes.length; j++ ) {
			if ( $( navFrame.childNodes[j] ).hasClass( 'NavHead' ) ) {
				navToggle.style.color = navFrame.childNodes[j].style.color;
				navFrame.childNodes[j].appendChild( navToggle );
			}
		}
		navFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
	} );
}

mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton );

}());

CSS

/* Standard Navigationsleisten, aka box hiding thingy
   from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.NavFrame {
	margin: 0;
	padding: 4px;
	border: 1px solid #a2a9b1;
	text-align: center;
	border-collapse: collapse;
	font-size: 95%;
}
div.NavFrame + div.NavFrame {
	border-top-style: none;
	border-top-style: hidden;
}
div.NavPic {
	background-color: #fff;
	margin: 0;
	padding: 2px;
	/* @noflip */
	float: left;
}
div.NavFrame div.NavHead {
	line-height: 1.6em;
	font-weight: bold;
	background-color: #ccf;
	position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
	font-size: 100%;
}
div.NavEnd {
	margin: 0;
	padding: 0;
	line-height: 1px;
	clear: both;
}
a.NavToggle {
	position: absolute;
	top: 0;
	/* @noflip */
	right: 3px;
	font-weight: normal;
	font-size: 90%;
}

.client-js .NavFrame.collapsed > .NavContent {
	display: none;
}

Collapsible tables

MediaWiki版本：

≤ 1.18

Wikipedia: See Help:Collapsing tables on Wikipedia

Example

{| class="wikitable collapsible collapsed"
|-
! This is the header cell, which is always shown
|-
| This cell is not shown by default.
|}

结果：

This is the header cell, which is always shown
This cell is not shown by default.

Source

参见: MediaWiki:Gadget-collapsibleTables.js

Copy and paste the following text into your wiki's MediaWiki:Common.js (or, if you have Gadgets extension installed, create a gadget for it).

/**
 * Collapsible tables
 *
 * Allows tables to be collapsed, showing only the header. See [[Help:Collapsing]].
 *
 * @version 2.0.3 (2014-03-14)
 * @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-collapsibleTables.js
 * @author [[User:R. Koot]]
 * @author [[User:Krinkle]]
 * @deprecated Since MediaWiki 1.20: Use class="mw-collapsible" instead which
 * is supported in MediaWiki core.
 */

var autoCollapse = 2;
var collapseCaption = 'hide';
var expandCaption = 'show';
var tableIndex = 0;

function collapseTable( tableIndex ) {
	var Button = document.getElementById( 'collapseButton' + tableIndex );
	var Table = document.getElementById( 'collapsibleTable' + tableIndex );

	if ( !Table || !Button ) {
		return false;
	}

	var Rows = Table.rows;
	var i;
	var $row0 = $(Rows[0]);

	if ( Button.firstChild.data === collapseCaption ) {
		for ( i = 1; i < Rows.length; i++ ) {
			Rows[i].style.display = 'none';
		}
		Button.firstChild.data = expandCaption;
	} else {
		for ( i = 1; i < Rows.length; i++ ) {
			Rows[i].style.display = $row0.css( 'display' );
		}
		Button.firstChild.data = collapseCaption;
	}
}

function createClickHandler( tableIndex ) {
	return function ( e ) {
		e.preventDefault();
		collapseTable( tableIndex );
	};
}

function createCollapseButtons( $content ) {
	var NavigationBoxes = {};
	var $Tables = $content.find( 'table' );
	var i;

	$Tables.each( function( i, table ) {
		if ( $(table).hasClass( 'collapsible' ) ) {

			/* only add button and increment count if there is a header row to work with */
			var HeaderRow = table.getElementsByTagName( 'tr' )[0];
			if ( !HeaderRow ) {
				return;
			}
			var Header = table.getElementsByTagName( 'th' )[0];
			if ( !Header ) {
				return;
			}

			NavigationBoxes[ tableIndex ] = table;
			table.setAttribute( 'id', 'collapsibleTable' + tableIndex );

			var Button     = document.createElement( 'span' );
			var ButtonLink = document.createElement( 'a' );
			var ButtonText = document.createTextNode( collapseCaption );
			// Styles are declared in [[MediaWiki:Common.css]]
			Button.className = 'collapseButton';

			ButtonLink.style.color = Header.style.color;
			ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
			ButtonLink.setAttribute( 'href', '#' );
			$( ButtonLink ).on( 'click', createClickHandler( tableIndex ) );
			ButtonLink.appendChild( ButtonText );

			Button.appendChild( document.createTextNode( '[' ) );
			Button.appendChild( ButtonLink );
			Button.appendChild( document.createTextNode( ']' ) );

			Header.insertBefore( Button, Header.firstChild );
			tableIndex++;
		}
	} );

	for ( i = 0;  i < tableIndex; i++ ) {
		if ( $( NavigationBoxes[i] ).hasClass( 'collapsed' ) ||
			( tableIndex >= autoCollapse && $( NavigationBoxes[i] ).hasClass( 'autocollapse' ) )
		) {
			collapseTable( i );
		}
	}
}

mw.hook( 'wikipage.content' ).add( createCollapseButtons );

Manual:Collapsible elements/zh

Contents

jQuery.makeCollapsible

示例

Simple

Simple with title

Table

With specified initial state

With specified collapsible part

With custom toggle link

As part of an infobox

Move toggle link to the left

Source

NavFrame

Example

Source

JavaScript

CSS

Collapsible tables

Example

Source

Navigation menu

Personal tools

Namespaces

不转换

Views

More

Search

Navigation

Support

Development

MediaWiki.org

Print/export

Tools

In other languages