1. घर
  2. सवाल और जवाब
  3. किसी अन्य तत्व का विस्तार करते समय तत्व को संकुचित करें केवल सीएसएस

किसी अन्य तत्व का विस्तार करते समय तत्व को संकुचित करें केवल सीएसएस

2015-12-30 10 views
5

मेरे पास asp.net साइट है। किसी कारण से, मैं अपने कोड में जावास्क्रिप्ट का उपयोग नहीं कर सकता। मैं इस कोड का उपयोग एक प्रसार्य तालिका बनाने के लिए:किसी अन्य तत्व का विस्तार करते समय तत्व को संकुचित करें केवल सीएसएस

html, body, form { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    text-align: left; 
 
    height: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
tr:nth-child(even) { 
 
    background: #F5F5F5; 
 
} 
 

 
tr:nth-child(odd) { 
 
    background: #DCDCDC; 
 
} 
 

 
tr:hover 
 
{ 
 
    background-color: #D3D3D3; 
 
} 
 
.toggle-box { 
 
    display: none; 
 
} 
 

 
.toggle-box + label { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-weight: bold; 
 
    line-height: 25px; 
 
    margin-bottom: 2px; 
 
    margin-left: 5px; 
 
    background-color: #F1F8FF; 
 
    border-bottom: 1px solid gray; 
 
} 
 

 
.toggle-box + label:hover { 
 
    background-color: #C5ECFF; 
 
} 
 

 
.toggle-box + label + div { 
 
    display: none; 
 
    margin-bottom: 10px; 
 
    margin-left: 20px; 
 
} 
 

 
.toggle-box:checked + label + div { 
 
    display: block; 
 
} 
 

 
.toggle-box + label:before { 
 
    background-color: #66AEFF; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    border-radius: 15px; 
 
    color: #FFFFFF; 
 
    content: "+"; 
 
    display: block; 
 
    float: left; 
 
    font-weight: bold; 
 
    height: 25px; 
 
    line-height: 25px; 
 
    margin-right: 5px; 
 
    text-align: center; 
 
    width: 25px; 
 
} 
 

 
.toggle-box:checked + label:before { 
 
    content: "\2212"; 
 
} 
 
#matru { 
 
    border: 0; 
 
    text-align: left; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 300px; 
 
}
<div runat="server" id="sidebar" style="padding: 5px 0 0 5px;"> 
 
    <input class='toggle-box' id='header1' type='checkbox' /><label for='header1'>Nguyễn Văn Tư</label><div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
      <tr> 
 
       <td>Tên khách hàng</td> 
 
       <td>Nguyễn Văn Tư</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Mã khách hàng</td> 
 
       <td>PC06LL0191387</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sery công tơ</td> 
 
       <td>14138734</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số cũ</td> 
 
       <td>194.000</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số mới</td> 
 
       <td>196.60</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sản lượng mới</td> 
 
       <td>2</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <input class='toggle-box' id='header2' type='checkbox' /><label for='header2'>ĐInh Thị Tha</label><div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
      <tr> 
 
       <td>Tên khách hàng</td> 
 
       <td>ĐInh Thị Tha</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Mã khách hàng</td> 
 
       <td>PC06LL0182038</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sery công tơ</td> 
 
       <td>14140069</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số cũ</td> 
 
       <td>2050.000</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số mới</td> 
 
       <td>2104.10</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sản lượng mới</td> 
 
       <td>54</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <input class='toggle-box' id='header3' type='checkbox' /><label for='header3'>Nguyễn Văn Nhựt</label><div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
      <tr> 
 
       <td>Tên khách hàng</td> 
 
       <td>Nguyễn Văn Nhựt</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Mã khách hàng</td> 
 
       <td>PC06LL0190775</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sery công tơ</td> 
 
       <td>14138746</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số cũ</td> 
 
       <td>2699.000</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số mới</td> 
 
       <td>2785.10</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sản lượng mới</td> 
 
       <td>86</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <input class='toggle-box' id='header4' type='checkbox' /><label for='header4'>Mai Văn Lý</label><div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
      <tr> 
 
       <td>Tên khách hàng</td> 
 
       <td>Mai Văn Lý</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Mã khách hàng</td> 
 
       <td>PC06LL0182035</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sery công tơ</td> 
 
       <td>14138744</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số cũ</td> 
 
       <td>2581.000</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Chỉ số mới</td> 
 
       <td>2631.70</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Sản lượng mới</td> 
 
       <td>50</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

यहाँ पूर्ण कोड: https://jsfiddle.net/pdhung197/3eomjp3m/
लेकिन मैं और अधिक चाहते हैं: जब मैं एक ढह तत्व पर क्लिक करें, उस तत्व का विस्तार और अन्य की जाएगी तत्व ढह जाएगा।
यह प्रोजेक्ट केवल सीएसएस, जावास्क्रिप्ट का उपयोग कर सकता है, इसलिए मेरे पास ऐसा करने का कोई समाधान नहीं है।

स्रोत

2015-12-30 Đồng Vọng

+0

इनलाइन सीएसएस और अपठनीय एचटीएमएल के साथ यह jsfiddle कोई अच्छा नहीं है। कृपया एक jsfiddle प्रदान करें जो आपकी समस्या को पुन: उत्पन्न करता है और पठनीय है। व्यक्तिगत रूप से मैं इस तरह कुछ उपयोग करता हूं: http://webdesignerhut.com/create-pure-css-tabs/। – Senthe

+0

क्या आप कृपया मुझे बता सकते हैं कि आप उस div को कैसे खोलते हैं? –

+0

@ हर्षशांगानी: वह div एक साइडबार है और शरीर के बाईं ओर स्थित स्थिति है। –

उत्तर

4

चाल सरल है। बस checkbox से radio पर इनपुट को प्रतिस्थापित करें और inputs में समान मान के साथ विशेषता name जोड़ें।

इस परिवर्तन का मतलब है कि केवल एक इनपुट है जो एक ही समय में checked हो सकता है। इसलिए, यदि आप एक आइटम पर क्लिक करते हैं तो बाकी सभी बंद हो जाएंगे।

html, body, form { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    text-align: left; 
 
    height: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
tr:nth-child(even) { 
 
    background: #F5F5F5; 
 
} 
 

 
tr:nth-child(odd) { 
 
    background: #DCDCDC; 
 
} 
 

 
tr:hover 
 
{ 
 
    background-color: #D3D3D3; 
 
} 
 
.toggle-box { 
 
    display: none; 
 
} 
 

 
[type="reset"] { 
 
    border: 0; 
 
    width: 100%; 
 
    text-align: inherit; 
 
    padding: 0; 
 
    font: inherit; 
 
    margin: 0; 
 
    outline:0 !important; 
 
} 
 

 
.toggle-box + label, 
 
[type="reset"]{ 
 
    cursor: pointer; 
 
    display: block; 
 
    font-weight: bold; 
 
    line-height: 25px; 
 
    margin-bottom: 2px; 
 
    margin-left: 5px; 
 
    background-color: #F1F8FF; 
 
    border-bottom: 1px solid gray; 
 
} 
 

 
.toggle-box + label:hover { 
 
    background-color: #C5ECFF; 
 
} 
 

 
.toggle-box + label + button { 
 
    display:none; 
 
} 
 

 
.toggle-box:checked + label { 
 
    display:none; 
 
} 
 

 
.toggle-box:checked + label + button { 
 
    display:block; 
 
} 
 

 
.toggle-box + label + button + div { 
 
    display: none; 
 
    margin-bottom: 10px; 
 
    margin-left: 20px; 
 
} 
 

 
.toggle-box:checked + label + button + div { 
 
    display: block; 
 
} 
 

 
.toggle-box + label:before, 
 
[type="reset"]:before{ 
 
    background-color: #66AEFF; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    border-radius: 15px; 
 
    color: #FFFFFF; 
 
    content: "+"; 
 
    display: block; 
 
    float: left; 
 
    font-weight: bold; 
 
    height: 25px; 
 
    line-height: 25px; 
 
    margin-right: 5px; 
 
    text-align: center; 
 
    width: 25px; 
 
} 
 

 
.toggle-box:checked + label:before { 
 
    content: "\2212"; 
 
} 
 
#matru { 
 
    border: 0; 
 
    text-align: left; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 300px; 
 
}
<form> 
 
    <div runat="server" id="sidebar" style="padding: 5px 0 0 5px;"> 
 
    <input class='toggle-box' id='header1' type="radio" name="radio" /><label for='header1'>Nguyễn Văn Tư</label> 
 
    <button type="reset">Nguyễn Văn Tư</button> 
 
    <div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
     <tr> 
 
      <td>Tên khách hàng</td> 
 
      <td>Nguyễn Văn Tư</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mã khách hàng</td> 
 
      <td>PC06LL0191387</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sery công tơ</td> 
 
      <td>14138734</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số cũ</td> 
 
      <td>194.000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số mới</td> 
 
      <td>196.60</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sản lượng mới</td> 
 
      <td>2</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <input class='toggle-box' id='header2' type='radio' name="radio" /><label for='header2'>ĐInh Thị Tha</label> 
 
    <button type="reset">ĐInh Thị Tha</button> 
 
    <div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
     <tr> 
 
      <td>Tên khách hàng</td> 
 
      <td>ĐInh Thị Tha</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mã khách hàng</td> 
 
      <td>PC06LL0182038</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sery công tơ</td> 
 
      <td>14140069</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số cũ</td> 
 
      <td>2050.000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số mới</td> 
 
      <td>2104.10</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sản lượng mới</td> 
 
      <td>54</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <input class='toggle-box' id='header3' type='radio' name="radio" /><label for='header3'>Nguyễn Văn Nhựt</label> 
 
    <button type="reset">Nguyễn Văn Nhựt</button> 
 
    <div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
     <tr> 
 
      <td>Tên khách hàng</td> 
 
      <td>Nguyễn Văn Nhựt</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mã khách hàng</td> 
 
      <td>PC06LL0190775</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sery công tơ</td> 
 
      <td>14138746</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số cũ</td> 
 
      <td>2699.000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số mới</td> 
 
      <td>2785.10</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sản lượng mới</td> 
 
      <td>86</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <input class='toggle-box' id='header4' type='radio' name="radio" /><label for='header4'>Mai Văn Lý</label> 
 
    <button type="reset">Mai Văn Lý</button> 
 
    <div> 
 
     <table style='text-align: left; width: 100%; vertical-align: middle;'> 
 
     <tr> 
 
      <td>Tên khách hàng</td> 
 
      <td>Mai Văn Lý</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mã khách hàng</td> 
 
      <td>PC06LL0182035</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sery công tơ</td> 
 
      <td>14138744</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số cũ</td> 
 
      <td>2581.000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Chỉ số mới</td> 
 
      <td>2631.70</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sản lượng mới</td> 
 
      <td>50</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</form>

http://jsbin.com/pefobi

नोट: आप की जरूरत है कि दूसरे क्लिक फिर टैब बंद हो जाएगा, तो आप form टैग के साथ सभी रैप करने के लिए किया है।

स्रोत

2015-12-30 10:15:29

+0

आपने मुझे बचाया। बहुत बहुत धन्यवाद ! –

+0

आपका स्वागत है;) शुभकामनाएं .. –

+1

अच्छा समाधान लेकिन एक मुद्दा है। आप एक ही क्लिक के साथ ध्वस्त नहीं हो सकते हैं। – ketan

संबंधित मुद्दे

 संबंधित मुद्दे