Mit Bootstrap zusammenklappbares, gruppiertes Seitennavigationsmenü, Codefreigabe-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Mit Bootstrap zusammenklappbares, gruppiertes Seitennavigationsmenü, Codefreigabe

May 17, 2018 pm 02:19 PM

bootstrap 可折叠导航

Dieser Artikel stellt hauptsächlich die relevanten Informationen von Bootstrap zur Implementierung des zusammenklappbaren gruppierten Seitennavigationsmenüs vor. Freunde, die es benötigen, können darauf zurückgreifen.

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

Rendering:

Quellcode:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --&gt;
    &lt;title&gt;表格&lt;/title&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;侧边导航菜单(可分组折叠)&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;侧边导航菜单(可分组折叠)&quot; /&gt;
    &lt;meta name=&quot;HandheldFriendly&quot; content=&quot;True&quot; /&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;img/favicon.ico&quot; rel=&quot;external nofollow&quot; &gt;
    &lt;!-- Bootstrap3.3.5 CSS --&gt;
    &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
    &lt;!--[if lt IE 9]&gt;
      &lt;script src=&quot;//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;//cdn.bootcss.com/respond.js/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
    &lt;style&gt;
      .panel-group{max-height:770px;overflow: auto;}
      .leftMenu{margin:10px;margin-top:5px;}
      .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
      .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
      .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
      .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p class=&quot;row&quot;&gt;
      &lt;p class=&quot;col-md-2&quot;&gt;
        &lt;p class=&quot;panel-group table-responsive&quot; role=&quot;tablist&quot;&gt;
          &lt;p class=&quot;panel panel-primary leftMenu&quot;&gt;
            &lt;!-- 利用data-target指定要折叠的分组列表 --&gt;
            &lt;p class=&quot;panel-heading&quot; id=&quot;collapseListGroupHeading1&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseListGroup1&quot; role=&quot;tab&quot; &gt;
              &lt;h4 class=&quot;panel-title&quot;&gt;
                分组1
                &lt;span class=&quot;glyphicon glyphicon-chevron-up right&quot;&gt;&lt;/span&gt;
              &lt;/h4&gt;
            &lt;/p&gt;
            &lt;!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 --&gt;
            &lt;p id=&quot;collapseListGroup1&quot; class=&quot;panel-collapse collapse in&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;collapseListGroupHeading1&quot;&gt;
              &lt;ul class=&quot;list-group&quot;&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;!-- 利用data-target指定URL --&gt;
                &lt;button class=&quot;menu-item-left&quot; data-target=&quot;test2.html&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-1
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-2
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-3
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-4
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-5
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-6
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-7
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-8
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-9
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-10
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项1-11
                &lt;/button&gt;
               &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/p&gt;
          &lt;/p&gt;&lt;!--panel end--&gt;
          &lt;p class=&quot;panel panel-primary leftMenu&quot;&gt;
            &lt;p class=&quot;panel-heading&quot; id=&quot;collapseListGroupHeading2&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseListGroup2&quot; role=&quot;tab&quot; &gt;
              &lt;h4 class=&quot;panel-title&quot;&gt;
                分组2
                &lt;span class=&quot;glyphicon glyphicon-chevron-down right&quot;&gt;&lt;/span&gt;
              &lt;/h4&gt;
            &lt;/p&gt;
            &lt;p id=&quot;collapseListGroup2&quot; class=&quot;panel-collapse collapse&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;collapseListGroupHeading2&quot;&gt;
              &lt;ul class=&quot;list-group&quot;&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项2-1
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项2-2
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项2-3
                &lt;/button&gt;
               &lt;/li&gt;
               &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;button class=&quot;menu-item-left&quot;&gt;
                  &lt;span class=&quot;glyphicon glyphicon-triangle-right&quot;&gt;&lt;/span&gt;分组项2-4
                &lt;/button&gt;
               &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/p&gt;
          &lt;/p&gt; 
        &lt;/p&gt;
      &lt;/p&gt;
      &lt;p class=&quot;col-md-10&quot;&gt;
        内容
      &lt;/p&gt;
    &lt;/p&gt;
    &lt;!-- jQuery1.11.3 (necessary for Bo otstrap&#39;s JavaScript plugins) --&gt;
    &lt;script src=&quot;js/jquery-1.11.3.min.js &quot;&gt;&lt;/script&gt;
    &lt;!-- Include all compiled plugins (below), or include inpidual files as needed --&gt;
    &lt;script src=&quot;js/bootstrap.min.js &quot;&gt;&lt;/script&gt;
    &lt;script&gt;
    $(function(){
      $(&quot;.panel-heading&quot;).click(function(e){
        /*切换折叠指示图标*/
        $(this).find(&quot;span&quot;).toggleClass(&quot;glyphicon-chevron-down&quot;);
        $(this).find(&quot;span&quot;).toggleClass(&quot;glyphicon-chevron-up&quot;);
      });
    });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Verwandte Empfehlungen:

jQuery implementiert das seitliche Navigationsmenü effect_jquery im Ballon-Popup-Box-Stil

Das obige ist der detaillierte Inhalt vonMit Bootstrap zusammenklappbares, gruppiertes Seitennavigationsmenü, Codefreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn