Bootstrap-Tree

这里的Tree指的是树形菜单，这篇博客通过一个实例来讲解一下，在Bootstrap框架下怎么去建立一个树形菜单。

前提：先添加Bootstrap和JQ的引用

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>  <span class="hljs-attribute">href</span>=<span class="hljs-value">"bootstrap-3.3.0-dist/dist/css/bootstrap.min.css"</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span>  <span class="hljs-attribute">src</span>=<span class="hljs-value">"bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

HTML CODE

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tree well"</span>></span>  <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-folder-open"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 廊坊师范学院<span class="hljs-tag"></<span class="hljs-title">span</span>></span>      <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>        <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-minus-sign"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 教育学院<span class="hljs-tag"></<span class="hljs-title">span</span>></span>          <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>            <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-leaf"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 学前教育<span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span>          <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>        <span class="hljs-tag"></<span class="hljs-title">li</span>></span>        <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-minus-sign"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 物电学院<span class="hljs-tag"></<span class="hljs-title">span</span>></span>          <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>            <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-leaf"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 电气工程技术<span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span>            <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-minus-sign"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 电子信息科学技术<span class="hljs-tag"></<span class="hljs-title">span</span>></span>              <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>                <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-minus-sign"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 电子一班<span class="hljs-tag"></<span class="hljs-title">span</span>></span>                  <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>                    <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-leaf"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 宋笑<span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span>                    <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-leaf"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 二盟<span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span>                  <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>                <span class="hljs-tag"></<span class="hljs-title">li</span>></span>                <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-leaf"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 电子二班<span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span>              <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>            <span class="hljs-tag"></<span class="hljs-title">li</span>></span>            <span class="hljs-tag"><<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-leaf"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span> 物理学<span class="hljs-tag"></<span class="hljs-title">span</span>></span> <span class="hljs-tag"></<span class="hljs-title">li</span>></span>          <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>        <span class="hljs-tag"></<span class="hljs-title">li</span>></span>      <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>    <span class="hljs-tag"></<span class="hljs-title">li</span>></span>  <span class="hljs-tag"></<span class="hljs-title">ul</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>

CSS CODE
（为树形菜单添加样式，使其符合Bootstrap框架的风格）

<code class="hljs css has-numbering"><span class="hljs-class">.tree</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">min-height</span>:<span class="hljs-value"><span class="hljs-number">20</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">19</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"><span class="hljs-number">20</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#fbfbfb</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">1</span>px solid <span class="hljs-hexcolor">#999</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-radius</span>:<span class="hljs-value"><span class="hljs-number">4</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius</span>:<span class="hljs-value"><span class="hljs-number">4</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"><span class="hljs-number">4</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">-webkit-box-shadow</span>:<span class="hljs-value">inset <span class="hljs-number">0</span> <span class="hljs-number">1</span>px <span class="hljs-number">1</span>px <span class="hljs-function">rgba(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.05</span>)</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">-moz-box-shadow</span>:<span class="hljs-value">inset <span class="hljs-number">0</span> <span class="hljs-number">1</span>px <span class="hljs-number">1</span>px <span class="hljs-function">rgba(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.05</span>)</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">box-shadow</span>:<span class="hljs-value">inset <span class="hljs-number">0</span> <span class="hljs-number">1</span>px <span class="hljs-number">1</span>px <span class="hljs-function">rgba(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.05</span>)</span></span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">list-style-type</span>:<span class="hljs-value">none</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">10</span>px <span class="hljs-number">5</span>px <span class="hljs-number">0</span> <span class="hljs-number">5</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">relative</span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-pseudo">::before</span>, <span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-pseudo">::after</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">content</span>:<span class="hljs-value"><span class="hljs-string">''</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value">-<span class="hljs-number">20</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">absolute</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">right</span>:<span class="hljs-value">auto</span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-pseudo">::before</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">border-left</span>:<span class="hljs-value"><span class="hljs-number">1</span>px solid <span class="hljs-hexcolor">#999</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">bottom</span>:<span class="hljs-value"><span class="hljs-number">50</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">100</span>%</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">1</span>px</span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-pseudo">::after</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">border-top</span>:<span class="hljs-value"><span class="hljs-number">1</span>px solid <span class="hljs-hexcolor">#999</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">20</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"><span class="hljs-number">25</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">25</span>px</span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span> <span class="hljs-tag">span</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">-moz-border-radius</span>:<span class="hljs-value"><span class="hljs-number">5</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">-webkit-border-radius</span>:<span class="hljs-value"><span class="hljs-number">5</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">1</span>px solid <span class="hljs-hexcolor">#999</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"><span class="hljs-number">5</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">inline-block</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">3</span>px <span class="hljs-number">8</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">text-decoration</span>:<span class="hljs-value">none</span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-class">.parent_li</span>><span class="hljs-tag">span</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">cursor</span>:<span class="hljs-value">pointer</span></span></span>}<span class="hljs-class">.tree</span>><span class="hljs-tag">ul</span>><span class="hljs-tag">li</span><span class="hljs-pseudo">::before</span>, <span class="hljs-class">.tree</span>><span class="hljs-tag">ul</span>><span class="hljs-tag">li</span><span class="hljs-pseudo">::after</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-pseudo">:last-child</span><span class="hljs-pseudo">::before</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span></span>}<span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-class">.parent_li</span>><span class="hljs-tag">span</span><span class="hljs-pseudo">:hover</span>, <span class="hljs-class">.tree</span> <span class="hljs-tag">li</span><span class="hljs-class">.parent_li</span>><span class="hljs-tag">span</span><span class="hljs-pseudo">:hover+ul</span> <span class="hljs-tag">li</span> <span class="hljs-tag">span</span> <span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"><span class="hljs-hexcolor">#eee</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">1</span>px solid <span class="hljs-hexcolor">#94a0b4</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#000</span></span></span></span>}</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li></ul>

JS CODE

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-comment">//为节点添加展开，关闭的操作</span>$(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>    $(<span class="hljs-string">'.tree li:has(ul)'</span>).addClass(<span class="hljs-string">'parent_li'</span>).find(<span class="hljs-string">' > span'</span>).attr(<span class="hljs-string">'title'</span>, <span class="hljs-string">'Collapse this branch'</span>);    $(<span class="hljs-string">'.tree li.parent_li > span'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> {</span>        <span class="hljs-keyword">var</span> children = $(<span class="hljs-keyword">this</span>).parent(<span class="hljs-string">'li.parent_li'</span>).find(<span class="hljs-string">' > ul > li'</span>);        <span class="hljs-keyword">if</span> (children.is(<span class="hljs-string">":visible"</span>)) {            children.hide(<span class="hljs-string">'fast'</span>);            $(<span class="hljs-keyword">this</span>).attr(<span class="hljs-string">'title'</span>, <span class="hljs-string">'Expand this branch'</span>).find(<span class="hljs-string">' > i'</span>).addClass(<span class="hljs-string">'icon-plus-sign'</span>).removeClass(<span class="hljs-string">'icon-minus-sign'</span>);        } <span class="hljs-keyword">else</span> {            children.show(<span class="hljs-string">'fast'</span>);            $(<span class="hljs-keyword">this</span>).attr(<span class="hljs-string">'title'</span>, <span class="hljs-string">'Collapse this branch'</span>).find(<span class="hljs-string">' > i'</span>).addClass(<span class="hljs-string">'icon-minus-sign'</span>).removeClass(<span class="hljs-string">'icon-plus-sign'</span>);        }        e.stopPropagation();    });});</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li></ul>

效果：

一棵符合Bootstrap风格的树就这么建造完成了，优点自不用说：整洁，美观。

这是一个demo，所以树中的值都是写死在html里面的，但是在实际项目中，树形菜单一般都是动态生成的，而Bootstrap却没有为我们提供一个类似TreeView那样的控件，只需要绑定上数据就可以动态生成一棵树，所以生成树的逻辑都需要我们手动用JS代码进行编写。这个过程着实有点繁琐，递归+嵌套。。

当然市面上也有很多封装好的一些树形菜单的插件，DTree，TreeList widget,Ztree,jQuery等等，就是外观和Bootstrap框架有点不搭。

有这么个折中的办法，就是取长补短，把Bootstrap的样式应用到这些封装好的树形插件上来满足需求。