overflow_javascript スキルを通じてリストの終了と展開を制御する JavaScript メソッド-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

overflow_javascript スキルを通じてリストの終了と展開を制御する JavaScript メソッド

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

javascript overflow 拡大する

この記事の例では、JavaScript がオーバーフローを通じてリストの終了と展開を制御する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过overflow控制列表闭合展开</title>
<style type="text/css">
div dl
{
  margin:0;
  padding:0;
  font-size:14px;
}
#divMain
{
  width:500px;
  background-color:#22477A;
  margin:0 auto;
  margin-top:30px;
}
dl
{
  width:200px;
  background:#A6BCE5;
  height:14px; /*和字体大小一样高*/
  overflow:hidden; /*默认溢出隐藏*/
}
dt
{
  cursor:pointer; /*设置手型光标*/
  font-weight:bold;
  color:Green;
}
.open
{
  height:112px;
  overflow:visible;
}
.close
{
  height:14px; /*和字体大小一样高*/
  overflow:hidden;
}
</style>
<script type="text/javascript">
function DisplayList() {
  var dtNode = window.event.srcElement;
  var dlNode = dtNode.parentNode;
  var dlNodes = document.getElementsByTagName("dl");
  for (var i = 0; i < dlNodes.length; i++) {
    if (dlNodes[i] == dlNode) { //判断是否是当前点击的dl
      if (dlNodes[i].className == "open") {
        dlNodes[i].className = "close";
      }
      else {
        dlNodes[i].className = "open";
      }
    }
    else {
      dlNodes[i].className = "close";
    }
  }
}
</script>
</head>
<body>
<div id="divMain">
<dl>
  <dt onclick="DisplayList()">
    球星列表1
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表2
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表3
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表4
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表5
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
<br />
<dl>
  <dt onclick="DisplayList()">
    球星列表6
  </dt>
  <dd>罗纳尔多</dd>
  <dd>贝克汉姆</dd>
  <dd>齐达内</dd>
  <dd>内马尔</dd>
  <dd>巴蒂斯图塔</dd>
  <dd>梅西</dd>
</dl>
</div>
</body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7378

Java チュートリアル

1628

CakePHP チュートリアル

1357

Laravel チュートリアル

1267

PHP チュートリアル

1216

Related knowledge

2009 年から 2025 年の誕生以来のビットコインの価格 BTC 過去の価格の最も完全な概要 Jan 15, 2025 pm 08:11 PM

2009 年の誕生以来、ビットコインは暗号通貨の世界のリーダーとなり、その価格は大きな変動を経験しました。包括的な歴史的概要を提供するために、この記事では 2009 年から 2025 年までのビットコイン価格データをまとめ、主要な市場イベント、市場センチメントの変化、価格変動に影響を与える重要な要因を取り上げます。

Windows 11 の右下隅で時間がなくなった場合の対処方法_Windows 11 の右下隅で時間がなくなった場合の対処方法 May 06, 2024 pm 01:20 PM

1. まず、Windows 11の下部にあるタスクバーの空白部分を右クリックし、[タスクバーの設定]を選択します。 2. タスクバー設定の右側にある [taskbarcorneroverflow] を見つけます。 3. 次に、その上にある [時計] または [時計] を見つけて選択し、オンにします。方法 2: 1. キーボードショートカット [win+r] を押して [ファイル名を指定して実行] を呼び出し、[regedit] と入力して Enter キーを押して確定します。 2. レジストリエディタを開き、その中にある[HKEY_CURRENT_USERControlPanel]を見つけて削除します。 3. 削除後、コンピュータを再起動すると、システムに戻ると、設定を求めるプロンプトが表示されます。

Pythonで他の人のコードを使用する方法 May 05, 2024 pm 07:54 PM

他の人の Python コードを使用するにはどうすればよいですか?コードリポジトリを見つける: PyPI や GitHub などのプラットフォームで必要なコードを見つけます。インストールコード: pip を使用するか、GitHub リポジトリのクローンを作成してインストールします。モジュールのインポート: スクリプト内で import ステートメントを使用して、インストールされているモジュールをインポートします。コードの操作: モジュール内の関数とクラスにアクセスします。 (オプション) コードを調整する: プロジェクトに合わせて必要に応じてコードを変更します。

win11 コンピューターの時刻が常に間違っている場合はどうすればよいですか? Windows 11コンピュータで間違った時刻を調整する方法 May 03, 2024 pm 09:20 PM

win11 コンピューターの時刻が常に間違っている場合はどうすればよいですか? win11 システムを使用するとき、誰もが時刻やカレンダーを設定しますが、多くのユーザーはコンピューターの時刻が常に間違っていると尋ねます。何が起こっているのでしょうか?ユーザーは下のタスクバーを直接クリックし、taskbarcorneroverflow を見つけてセットアップできます。このサイトでは、Win11 コンピューターの時刻誤差を調整する方法を詳しく紹介します。 Windows 11 でコンピューターの時刻エラーを調整する方法。方法 1: 1. まず、下のタスクバーの空白スペースを右クリックし、[タスクバーの設定] を選択します。方法 2: 1. キーボードショートカット win+r を押して「ファイル名を指定して実行」を呼び出し、「regedit」と入力して Enter キーを押して確認します。

Java関数開発における一般的な例外の種類とその修復方法 May 03, 2024 pm 02:09 PM

Java 関数開発における一般的な例外の種類とその修復方法 Java 関数の開発中に、関数の正しい実行に影響を与えるさまざまな例外が発生する可能性があります。一般的な例外の種類とその修復方法は次のとおりです。 1. NullPointerException 説明: 初期化されていないオブジェクトにアクセスするとスローされます。修正: オブジェクトを使用する前に、オブジェクトが null でないことを確認してください。サンプルコード: try{Stringname=null;System.out.println(name.length());}catch(NullPointerExceptione){

Douyin のランダムなアカウントを管理する人はいませんか?二度目の異議申し立てはできますか？ May 03, 2024 am 09:37 AM

世界的に有名なショートビデオプラットフォームとして、Douyin には巨大なユーザーベースとコンテンツクリエイターがいます。ただし、プラットフォームのルールは常に更新および改善されているため、一部のユーザーはアカウント禁止に遭遇する可能性があります。これにより、プラットフォーム管理の透明性と公平性について世間の疑問が生じています。この記事では、Douyin アカウントの禁止の問題と、アカウントが禁止された後にユーザーに異議を申し立てる方法があるかどうかについて説明します。 Douyin プラットフォームで禁止される理由は数多くあります。これには、違法なコンテンツ、プラットフォーム規制の違反、他人の権利の侵害などが含まれますが、これらに限定されません。プラットフォームの秩序とユーザーの利益を維持するために、Douyin は一連のルールとレビューメカニズムを確立しました。一部のユーザーがルールに違反した場合、そのアカウントは禁止される場合があります。ただし、一部のユーザーは禁止の理由に疑問を抱いたり、不満を抱いたりする可能性があります。