JavaScript 格納式メニューバーの実装コード_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript 格納式メニューバーの実装コード_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:32 PM

この記事では、タイトルをクリックしたときにタイトル下のメニューが表示されるかどうかを判定する方法を実装します。表示されている場合は非表示にします。具体的なコードは以下の通りです

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{margin:0;
   padding:0;
   font-size:13px;
   list-style:none;}

.menu{width:210px;
   margin:50px auto;
   border:1px solid #ccc;}

.menu p{height:25px;
    line-height:25px;
    font-weight:bold;
    background:#eee;
    border-bottom:1px solid #ccc;
    cursor:pointer;
    padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
     line-height:24px;
     padding-left:5px;}
</style>
  <script type="text/javascript">
  window.onload=function(){

   // 将所有点击的标题和要显示隐藏的列表取出来
  var ps = document.getElementsByTagName("p");
  var uls = document.getElementsByTagName("ul");

   // 遍历所有要点击的标题且给它们添加索引及绑定事件
  for(var i = 0, n = ps.length; i <n; i += 1){

    ps[i].id = i;
    ps[i].onclick = function(){
      for(var j = 0; j < n ; j += 1){
        uls[j].style.display = "none";
      }
      uls[this.id].style.display = "block";
    }
   // 获取点击的标题上的索引属性，根据该索引找到对应的列表
  }
   // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来
 }
  </script>
</head>
<body>
  <div class="menu" id="menu">
    <div>
      <p>Web前端</p>
      <ul style="display:block">
        <li>JavaScript</li>
        <li>DIV+CSS</li>
        <li>jQuery</li>
      </ul>
    </div>
    <div>
      <p>后台脚本</p>
      <ul>
        <li>PHP</li>
        <li>ASP.net</li>
        <li>JSP</li>
      </ul>
    </div>
    <div>
      <p>前端框架</p>
      <ul>
        <li>Extjs</li>
        <li>Esspress</li>
        <li>YUI</li>
      </ul>
    </div>
  </div>
</body>
</html>

ログイン後にコピー

効果の例:

上記は、JavaScript 伸縮メニューバーの実装コードです。学習に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7364

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

＆＃x27; this＆＃x27; JavaScriptで？ Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした