的Javascript處理可摺疊股利和孩子的div

我在JS實現可摺疊DIV，其功能是顯示/隱藏的孩子申報單等的Javascript處理可摺疊股利和孩子的div

所以，當你點擊它，就會切換的消失股利。類似樹視圖

我想要做的是，我應該能夠選擇子div中的數據，但問題是。當我點擊子div時，父按鈕消失，因爲onclick觸發我猜。

請建議如何實現這一點。所以我的目標是切換包含子div的div顯示，但是如果您選擇某些東西或突出顯示子div中的某些內容，則父div不應當摺疊等。

請參閱下面的代碼。

     <html> 
       <head> 
        <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        <title>Data</title> 
        <style> 
         #container { 
          clear: both; 
          width: 400px; 
          margin: 0 0; 
          border: none; 
         } 

         #row { 
          clear: both; 
          width: 100%; 
          border: none; 
         } 

         #column { 
          border: double #aca899; 
          float: left; 
          clear: none; 
          width: 402px; 
         }  

         #columnHeader p { 
          float: left; 
          clear: none; 
          text-align: center; 
          width: 100%; 
          height: 20px; 
          padding-top: 2px; 
          font-size: 8.0pt; 
          font-family: Verdana; 
          font-weight: bold; 
          color: black; 
          text-decoration: underline; 
          border: 1px ridge #aca899; 
         } 

         #subSectionHeader { 
          float: left; 
          clear: none; 
          width: 50%; 
          font-size: 7.5pt; 
          font-family: Arial; 
          background-color: #DBA083; 
          border: 1px ridge #aca899; 
          border-collapse: collapse; 
          padding: 1px; 
         }  


         #label { 
          float: left; 
          clear: none; 
          width: 50%; 
          font-size: 7.5pt; 
          font-family: Arial; 
          background-color: #F2CF93; 
          border: 1px ridge #aca899; 
          padding: 1px 1px 1px 11px; 
         }  


         #Value { 
          float: left; 
          clear: none; 
          width: 50%; 
          font-size: 7.5pt; 
          font-family: Arial; 
          background-color: #DDDDDD; 
          border: 1px ridge #aca899; 
          padding: 1px; 
         }   

        </style> 
      <script type="text/javascript"> 
       function switchMenu(cur, e) { 
       var obj = e.target || e.srcElement; //works on IE and FF 
       var childDiv = cur.id + 'Child'; 


        if (obj.parentNode.id != childDiv) { 
         var el = document.getElementById(childDiv); 
         if (el.style.display != "none") { 
          el.style.display = 'none'; 
         } 
         else { 
          el.style.display = ''; 
         } 
        } 
       } 

       </script> 
       </head> 

       <body> 
        <div id="container"> 

         <div style="margin-top: 15px;"></div> 
         <div id="row"> 
          <div id="column"> 
          <div id="abc" onclick="switchMenu(this, event)"> 

           <div id="columnHeader"><p>Section 1</p></div>     

           <div id="subSectionHeader"><p>Some Label I</p></div> <div id="subSectionHeader"><p>&nbsp;</p></div> 
           <div id="abcChild"> 
           <div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>     
           <div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>     
           <div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div>     
           </div> 
           </div> <!--abc--> 

           <!--cde --> 
           <div id="cde" onclick="switchMenu(this, event)"> 
           <div id="subSectionHeader"><p>Some Label II</p></div> <div id="subSectionHeader"><p>&nbsp;</p></div> 
           <div id="cdeChild"> 
           <div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div> 
           <div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div> 
           <div id="label"><p>Label</p></div> <div id="value"><p>Value</p></div> 
           </div> 
           </div> 
           <!--cde --> 
          </div> 

         </div> 

        </div> 
       </body> 
      </html>

你的建議和幫助將不勝感激感謝您的時間。

來源

2011-07-28 Nomad

如果在子div上執行單擊操作，則不要執行操作。
更新：

編輯的結構是不同的，因爲你有p內div。我修改了代碼以使用新結構。請注意，ID必須是唯一的。你的CSS混淆了佈局並導致代碼失敗。如果你拿出你的CSS，代碼的作品。

如果你使用jquery，這將會簡單得多。

代碼更新由RobG

UPDATE2包括建議：在findParent和更強大的修復錯誤。

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <title>Data</title> 
     <style> 
         #container { 
          clear: both; 
          width: 400px; 
          margin: 0 0; 
          border: none; 
         } 

         .row { 
          clear: both; 
          width: 100%; 
          border: none; 
         } 

         .column { 
          border: double #aca899; 
          float: left; 
          clear: none; 
          width: 402px; 
         }  

         .columnHeader p { 
          float: left; 
          clear: none; 
          text-align: center; 
          width: 100%; 
          height: 20px; 
          padding-top: 2px; 
          font-size: 8.0pt; 
          font-family: Verdana; 
          font-weight: bold; 
          color: black; 
          text-decoration: underline; 
          border: 1px ridge #aca899; 
         } 

         .subSectionHeader { 
          float: left; 
          clear: none; 
          width: 50%; 
          font-size: 7.5pt; 
          font-family: Arial; 
          background-color: #DBA083; 
          border: 1px ridge #aca899; 
          border-collapse: collapse; 
          padding: 1px; 
         }  


         .label { 
          float: left; 
          clear: none; 
          width: 50%; 
          font-size: 7.5pt; 
          font-family: Arial; 
          background-color: #F2CF93; 
          border: 1px ridge #aca899; 
          padding: 1px 1px 1px 11px; 
         }  


         .value { 
          float: left; 
          clear: none; 
          width: 50%; 
          font-size: 7.5pt; 
          font-family: Arial; 
          background-color: #DDDDDD; 
          border: 1px ridge #aca899; 
          padding: 1px; 
         }   
     </style> 
<script type="text/javascript"> 
function switchMenu(cur, e) { 
    var obj = e.target || e.srcElement; //works on IE and FF 
    var childDiv = cur.id + 'Child'; 

    if (obj.className.toLowerCase() != "nocollapse" && isInCollapsible(obj)) { 
     var el = document.getElementById(childDiv); 
     el.style.display = el.style.display != "none" ? "none" : ""; 
    } 
} 

function isInCollapsible(obj) { 
    return findParent(obj, "div", "nocollapse") ? false : true; 
} 

function findParent(obj, type, name) { 
    if (obj.parentNode) 
     if (obj.parentNode.tagName && obj.parentNode.tagName.toLowerCase() == type && obj.parentNode.className.toLowerCase() == name) 
      return obj.parentNode; 
     else 
      return findParent(obj.parentNode, type, name); 
    else 
     return null; 
} 

    </script> 
    </head> 

    <body> 
     <div id="container"> 

      <div style="margin-top: 15px;"></div> 
      <div class="row"> 
       <div class="column"> 
       <div id="abc" onclick="switchMenu(this, event)"> 

        <div class="columnHeader"><p>Section 1</p></div>     

        <div class="subSectionHeader"><p>Some Label I</p></div> <div class="subSectionHeader"><p>&nbsp;</p></div> 
        <div id="abcChild" class="noCollapse"> 
        <div class="label"><p>Label</p></div> <div class="value"><p>Value</p></div>     
        <div class="label"><p>Label</p></div> <div class="value"><p>Value</p></div>     
        <div class="label"><p>Label</p></div> <div class="value"><p>Value</p></div>     
        </div> 
        </div> <!--abc--> 

        <!--cde --> 
        <div id="cde" class="parent" onclick="switchMenu(this, event)"> 
        <div class="subSectionHeader"><p>Some Label II</p></div> <div class="subSectionHeader"><p>&nbsp;</p></div> 
        <div id="cdeChild" class="noCollapse"> 
        <div class="label"><p>Label</p></div> <div class="value"><p>Value</p></div> 
        <div class="label"><p>Label</p></div> <div class="value"><p>Value</p></div> 
        <div class="label"><p>Label</p></div> <div class="value"><p>Value</p></div> 
        </div> 
        </div> 
        <!--cde --> 
       </div> 

      </div> 

     </div> 
    </body> 
</html>

來源

2011-07-28 03:13:23 Jules

+1 - 幾乎正是我要發佈的內容。使用id的另一種方法是在子div或父div上添加一個類並對其進行測試。樣式可以使用以下命令進行切換：'el.style.display = el.style.display =='none'？ ''：'none';' – RobG

嗨，這工作正常在FF但不是在IE中。 – Nomad

它應該在IE8中工作。什麼是您的IE版本？有沒有任何錯誤信息？ – Jules

的Javascript處理可摺疊股利和孩子的div

回答

相關問題