在Javascript中顯示各種div onclick

Question

我有3個服務面板divs我使用javascript來顯示他們'點擊'時。

我發佈了一個jsFiddle來顯示面板的全部內容。

• 確保的jsfiddle是JavaScript的（不包 - 在 - ）的功能，工作

我想找出一種方法來寫，打開每一個面板及其內部內容一個功能。 這將消除我爲每個面板製作一個新功能和#id。

<!-- Panel 1 --> 
<div class="service-panel" onclick="openService()"> 

<!-- Panel 2 --> 
<div class="service-panel" onclick="openService2()"> 

<!-- Panel 3 --> 
<div class="service-panel" onclick="openService3()"> 


function openService() { 
var x = document.getElementById('open1'); 
var y = document.getElementById('toggle1'); 
if (x.style.display === 'none') { 
    x.style.display = 'block'; 
    y.innerHTML = '-'; 
} else { 
    x.style.display = 'none'; 
    y.innerHTML = '+'; 
    y.style.color = '#ffffff'; 
    } 
} 

function openService2() { 
var x = document.getElementById('open2'); 
var y = document.getElementById('toggle2'); 
if (x.style.display === 'none') { 
    x.style.display = 'block'; 
    y.innerHTML = '-'; 
} else { 
    x.style.display = 'none'; 
    y.innerHTML = '+'; 
    y.style.color = '#ffffff'; 
    } 
} 

這個問題必須有一個簡單的解決方案。

https://jsfiddle.net/rrn7fvxt/1/#&togetherjs=jaBJddxmdg

Answer 1

下面是使用jQuery的解決方案：

$(function() { 
 
    $(".open").hide(); 
 
    $(".service-panel").click(function() { 
 
    $(this).next().toggle(); 
 
    $(this).data("open", !$(this).data("open")); 
 
    $(this).find(".toggle").html($(this).data("open") ? "-" : "+"); 
 
    }); 
 
});

.section-service { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 3; 
 
} 
 

 
.container-service { 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 1400px; 
 
    height: 100%; 
 
} 
 

 
.service-panel { 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 90%; 
 
    height: 50px; 
 
    background-color: #636363; 
 
    margin-bottom: 1px; 
 
    cursor: pointer; 
 
} 
 

 
.service-panel:hover { 
 
    background-color: #545454; 
 
} 
 

 
.service-panel-open { 
 
    margin: 0 auto; 
 
    padding: 30px 0px; 
 
    text-align: center; 
 
    width: 90%; 
 
    height: 100%; 
 
    background-color: #ffffff; 
 
    margin-bottom: 1px; 
 
    cursor: pointer; 
 
    transition: 1s; 
 
} 
 

 

 
/* Images!!!! */ 
 

 
.container-image { 
 
    margin: 0 auto; 
 
    display: block; 
 
    overflow: hidden; 
 
    max-width: 1000px; 
 
    padding-bottom: 18px; 
 
} 
 

 
.serImg { 
 
    display: inline-block; 
 
    margin: 10px; 
 
    width: 30%; 
 
    float: left; 
 
} 
 

 
.container-service-text { 
 
    margin: 0 auto; 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 98%; 
 
} 
 

 

 
/* service text */ 
 

 
#serviceName { 
 
    margin: 0 auto; 
 
    padding-left: 7px; 
 
    color: #000000; 
 
    width: 100%; 
 
    float: left; 
 
    text-align: justify; 
 
    font-size: 30px; 
 
} 
 

 
#serviceDescription { 
 
    margin: 0 auto; 
 
    padding-left: 9px; 
 
    color: #000000; 
 
    width: 92%; 
 
    float: left; 
 
    text-align: justify; 
 
    font-size: 14px; 
 
} 
 

 
button.reqQuoteBtn { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 158px; 
 
    height: 50px; 
 
    padding: 14px 32px 14px 32px; 
 
    background-color: #58B2C5; 
 
    border-radius: 4px; 
 
    border: none; 
 
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px 0px; 
 
    color: #ffffff; 
 
    font-size: 13px; 
 
} 
 

 
button.reqQuoteBtn:hover { 
 
    background-color: #4EA7BB; 
 
    border-bottom: 3px solid rgba(0, 0, 0, 0.5); 
 
    cursor: pointer; 
 
} 
 

 
button.reqQuoteBtn:focus { 
 
    outline: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.serviceName { 
 
    color: #ffffff; 
 
    margin: 0px 20px; 
 
    float: left; 
 
    padding: 14px; 
 
} 
 

 
.toggle { 
 
    float: right; 
 
    color: #ffffff; 
 
    margin: 0px 20px; 
 
    padding: 14px; 
 
} 
 

 
.containerCloseAll { 
 
    display: block; 
 
    padding: 5px 0px 60px 0px; 
 
} 
 

 
#closeAllBtn { 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 200px; 
 
    height: 30px; 
 
    background-color: #ffffff; 
 
    border: 1px solid #000000; 
 
    border-radius: 30px; 
 
    margin-top: 10px; 
 
    cursor: pointer; 
 
    transition: 1s; 
 
} 
 

 
#closeAllBtn:hover { 
 
    width: 220px; 
 
} 
 

 
#closeAllBtn:focus { 
 
    outline: none; 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
    .serImg { 
 
    float: none; 
 
    width: 100%; 
 
    max-width: 90%; 
 
    } 
 
} 
 

 
@media screen and (max-width: 515px) { 
 
    .serImg { 
 
    float: none; 
 
    width: 100%; 
 
    max-width: 350px; 
 
    } 
 
    .container-service-text { 
 
    max-width: 370px; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .serImg { 
 
    width: 46%; 
 
    } 
 
    .service-panel { 
 
    width: 100%; 
 
    } 
 
    .service-panel-open { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@-webkit-keyframes fadeIn { 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes fadeIn { 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.fade-in { 
 
    -webkit-animation: fadeIn .5s ease-in 1 forwards; 
 
    animation: fadeIn .5s ease-in 1 forwards; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section-service" id="services"> 
 
    <div class="margin"> 
 
    <div class="container-service"> 
 
     <!-- Panel 1 --> 
 
     <div class="service-panel"> 
 
     <p class="serviceName">Concrete</p> 
 
     <p class="toggle" id="toggle1">+</p> 
 
     </div> 
 
     <!-- sPanel 1 --> 
 
     <div class="service-panel-open" id="open1" style="display:none;"> 
 
     <div class="container-image fade-in"> 
 
      <div class="container-service-text"> 
 
      <p id="serviceDescription">Description will be placed here for the first.</p> 
 
      </div> 
 
     </div> 
 
     <a href="#contact"> 
 
      <button class="reqQuoteBtn">Request Quote</button> 
 
     </a> 
 
     </div> 
 

 
     <!-- Panel 2 --> 
 
     <div class="service-panel"> 
 
     <p class="serviceName">Framing</p> 
 
     <p class="toggle" id="toggle2">+</p> 
 
     </div> 
 
     <!-- sPanel 2 --> 
 
     <div class="service-panel-open" id="open2" style="display:none;"> 
 
     <div class="container-image fade-in"> 
 
      <div class="container-service-text"> 
 
      <p id="serviceDescription">Description will be placed here for the second.</p> 
 
      </div> 
 
     </div> 
 
     <a href="#contact"> 
 
      <button class="reqQuoteBtn">Request Quote</button> 
 
     </a> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>