2013-11-23 1078 views
2

想知道,如何讓我的代碼適用於多個可摺疊的div,而無需創建相同CSS/JS代碼的其他實例?Collapsable Div腳本。代碼不適用於多個div

到目前爲止,我只設法使其工作1格。我還是JS的新手,我喜歡學習新技術。

我很樂意聽到一些反饋意見。

<input type="button" onclick="growDiv()" value="Read more" id="more-button"> 
<div id='grow'> 
    <div class='measuringWrapper'> 
     <div class="text">Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse v Testing Collapse Testing Collapse</div> 
    </div> 
</div> 

JS

function growDiv() { 
    var growDiv = document.getElementById('grow'); 
    if (growDiv.clientHeight) { 
     growDiv.style.height = 0; 
    } else { 
     var wrapper = document.querySelector('.measuringWrapper'); 
     growDiv.style.height = wrapper.clientHeight + "px"; 
    } 
    document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more'; 
} 

這裏是我的jsfiddle

http://jsfiddle.net/kGs7Q/1/

回答

1
  1. 使用類沒有ID的
  2. 遍歷div的一次,把事件偵聽器
  3. 使用閉包,以保持事件回調

this JSFiddle工作示例內部元素的引用。

僅供參考這裏是HTML/JS:

HTML:

<div class="collapsible"> 
    <input type="button" value="Read more" class="more-button"> 
    <div class='growable'> 
     <div class='measuringWrapper'> 
      <div class="text">Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse v Testing Collapse Testing Collapse</div> 
     </div> 
    </div> 
</div> 

複製粘貼儘可能多的這些如你所願。

JS:

(function() { 
    var i, len, collapsibles = document.getElementsByClassName('collapsible'); 
    for (i = 0, len = collapsibles.length; i < len; i++) { 
     (function(collapsible) { 
      var button = collapsible.getElementsByClassName('more-button')[0]; 
      var growDiv = collapsible.getElementsByClassName('growable')[0]; 
      var wrapper = growDiv.getElementsByClassName('measuringWrapper')[0]; 
      button.addEventListener('click', function() { 
       if (growDiv.clientHeight) { 
        growDiv.style.height = 0; 
       } 
       else { 
        growDiv.style.height = wrapper.clientHeight + "px"; 
       } 
       button.value = (button.value === 'Read more' ? 'Read less' : 'Read more'); 
      }); 
     })(collapsibles[i]); 
    } 
})(); 
0

使用ID s是偉大的,但ID s爲在DOM獨特。對於多功能你需要切換到使用類和this關鍵字。其實這個功能現在對我來說似乎更簡單了。看看

function growDiv(growDiv) { 
    var wrapper = growDiv.getElementsByClassName('measuringWrapper')[0], 
     label = growDiv.getElementsByClassName('label')[0]; 

    wrapper.style.height = (wrapper.clientHeight) ? 0 : growDiv.clientHeight + 'px'; 
    label.innerHTML = label.innerHTML == 'Read more' ? 'Read less' : 'Read more'; 
} 

這裏的fiddle

+0

如果你使用'auto',過渡不工作。 – Oriol

+0

@Oriol我想知道爲什麼它不工作。更新在一秒! –

1

使用類代替IDS:

HTML:

<input type="button" class="more-button" data-target="[targetID]" value="Read more" /> 
<div id="[targetID]" class="grow"> 
    <div class="measuringWrapper"> 
     [Content] 
    </div> 
</div> 

JS:

function growDiv() { 
    var target = this.getAttribute('data-target'); 
    target = document.getElementById(target); 
    if (target.clientHeight) { 
     target.style.height = 0; 
    } else { 
     var wrapper = target.querySelector('.measuringWrapper'); 
     target.style.height = wrapper.clientHeight + "px"; 
    } 
    this.value = this.value==='Read more'?'Read less':'Read more'; 
} 
var els = document.getElementsByClassName('more-button'); 
for(var i=els.length-1; i>=0; --i) { 
    els[i].onclick = growDiv; 
} 

DEMO