今天遇到一個需求，就是在頁面的sidebar/左側有一個下拉選單，選單有三級，前兩級點選的時候會彈出下一級的選單，最後一級點選的時候頁面內容部分/右側會展現相應的文章內容。

因為不想在每一次點選最後一級選單的時候都去資料庫讀取資料或者是用ajax讀取資料，所以在頁面一載入的時候就已經把每個小選單對應的文章內容也獲取到了。
我的思路就是，每篇文章跟在每一個小選單，然後用隱藏div隱藏起來，每個隱藏div都有個屬性，這個屬性就是小選單的id值。當點選每一個小選單的時候，用javascript獲取到這個選單的id值，然後獲取到對應id的隱藏div裡面的所有內容，然後把內容放到右側那裡。
其實如果只是點選左側小選單，右側就顯示相應的文章內容，是比較好實現的，只要小選單和隱藏div都有對應相同的屬性值，就能呼叫。例如如下程式碼所示：

<li class="list-group-item dropdown clearfix" sid="li_{$voco['id']}">
                            <a href="javascript:void(0);" name="show_div" sid="sd_{$voco['id']}">
                            <i class="fa fa-circle"></i> 
                            {$voco['title']}
                            </a
 
>
                            <div style="display:none;" id="div_{$voco['id']}">

如圖中程式碼所示，我給a標籤（小選單）和div（隱藏div）都設定了一個同樣包含有id值的屬性，想要點選左側的小選單，右側就顯示相應的內容，程式碼如下：

<script type="text/javascript">
      $("[name='show_div']").click(function(){
        //先要去除所有紅色，
        $("[name='show_div']"
 
).parent().removeClass('active');

        var val = $(this).attr('sid'); 
        val = val.substr(3);        

        //點選對應的優惠，sidebar上的li元素是active，即為紅色，
        $("[sid='li_"+val+"']").addClass('active');


        //選擇相應的優惠內容在頁面上
        val = "div_" + val;
        var html = document.getElementById(val).innerHTML;//alert(html);
        document.getElementById('showdiv').innerHTML = html;

這裡用到innerHTML，先用innerHTML獲得隱藏div裡面的內容，再把這個內容賦值給右側的內容展示區域。

如果問題到這裡的話應該就簡單了，但是現在還有一個需求，就是在右側顯示的文章內容裡面會有幾篇文章的標題，而使用者點選文章標題就可以看到相應的文章了，然後我就想，那可以啊，只要給那幾個文章標題都加上和小選單一樣的屬性值，那麼點選這幾個文章標題的時候，同樣獲取到這個屬性值，再獲取到這個屬性值對應的內容後覆蓋到右側內容，就可以了。

所以我就如法炮製，但是發現一個問題，點選那幾個文章標題根本沒有反應，就是說我對那幾個文章標題寫的js語句根本不起反應，這是為什麼呢？我開啟瀏覽器，按F12除錯，然後輸入js語句，終於讓我發現了問題所在，那就是如果點選左側選單，彈出內容後，在瀏覽器除錯欄輸入js語句，點選內容裡面的文章標題，js語句起作用了；但是我點選了文章標題之後，再一次彈出來的內容裡面也包含了文章標題，我點選，沒反應，說明js語句只運行了一次，而我們的需求邏輯是對文章標題做作用的js語句必須時刻執行，所以我想到了每點選一次文章標題，就要重新生成一次js語句，就是要把對文章標題作用的js語句寫到一個函式裡面，並且不斷迴圈呼叫，程式碼如下：

$("[name='show_ss']").click(function(){
            var pp = $(this).attr('sid');
            pp = pp.substr(3);
            pp = "div_" + pp;
            var html = document.getElementById(pp).innerHTML;
            document.getElementById('showdiv').innerHTML = html;
            if (true) {
              bb();
            }
        });
        function bb(){
          $("[name='show_ss']").click(function(){
              var pp = $(this).attr('sid');
              pp = pp.substr(3);
              pp = "div_" + pp;
              var html = document.getElementById(pp).innerHTML;
              document.getElementById('showdiv').innerHTML = html;
              bb();
          });
        }

感覺個人對於js只理解了一點點，還是要從根本去理解，這樣寫語句的時候才能更明白如何符合脈絡邏輯去編寫。