jqueryを使用してdivを切り替えていますが、このdivで定義された背景色は、クリックすると表示されます

Question

ちょうどhtmlとJQueryで始まりますが、タイトルは自明です。私は3つのイメージを持っていると私はそれらのいずれかをクリックしたときに、それは私が別の背景色を設定しDIVを切り替えますが、私は、画像

var source = ""; 
 
    
 
    $('.img-slide-down').click(function() { 
 
     var hidden; 
 
     console.log('hidden: ' + $(".information").is(":hidden")); 
 
     if (source == "" || source == $(this).attr('src')) { 
 
      hidden = $(".information").is(":hidden"); 
 
      $('.information').slideToggle();    
 
     } else { 
 
      hidden = $(".information").is(":hidden"); 
 
      $('.information').slideUp(); 
 
      $('.information').slideToggle(); 
 
     } 
 
     
 
     videoControl(!hidden); 
 
     source = $(this).attr('src'); 
 
      
 
    }); 
 

 
    function videoControl(bool) { 
 
     var video = document.getElementsByClassName('hmtlVideo')[0]; 
 
     console.log(bool); 
 
     if (bool) { 
 
      video.pause(); 
 
      video.currentTime = 0; 
 
     } else { 
 
      video.play(); 
 
     } 
 
    }

body { 
 
     background-color: #2c3d55; 
 
     color: #e8e9f3; 
 
    } 
 
    .border-box { 
 
     border: 2px solid red; 
 
     max-height: 100px; 
 
     height: 100px; 
 
     min-width: 200px; 
 
     border-radius: 20px; 
 
     display: inline-block; 
 
    } 
 
    
 
    .row-centered { 
 
     text-align: center; 
 
    } 
 
    .col-centered { 
 
     display: inline-block; 
 
     float: none; 
 
     /*text-align: center;*/ 
 
    } 
 
    
 
    .main-content{ 
 
     margin-top:3%; 
 
    } 
 
    
 
    .header { 
 
     background: #393d3f; 
 
     color: #e8e9f3; 
 
    } 
 
    .selected-item { 
 
     border-bottom-color: #4381c1; 
 
    } 
 
    .img-slide-down { 
 
     height: 180px; 
 
     width: 240px; 
 
     
 
    } 
 
    .img-box{ 
 
     position:relative; 
 
    } 
 
    .information { 
 
     margin-top: 1%; 
 
     display: none; 
 
     width: 100%; 
 
     background-color: #04395e; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container main-content"> 
 
      <div class="row row-centered"> 
 
       <div class="col-md-3 col-centered"> 
 
        <img class="img-slide-down" src="media/ss_house.jpg"/>   
 
       </div> 
 
       <div class="col-md-3 col-centered"> 
 
        <img class="img-slide-down" src="media/ss_road.jpg" /> 
 
       </div> 
 
       <div class="col-md-3 col-centered"> 
 
        <img class="img-slide-down" src="media/ss_water.jpg" /> 
 
       </div> 
 
       <div class="information"> 
 
        <video class="col-md-6 hmtlVideo" controls autoplay> 
 
         <source src="media/h2oF.mp4" type="video/mp4"/> 
 
        </video> 
 
        <div class="col-md-4"> 
 
         Lorem ipsum dolor sit amet, 
 
         consectetur adipiscing elit. 
 
         Cras sagittis pretium quam quis vehicula. 
 
         Ut quis tellus et diam tincidunt pretium. 
 
         
 
        </div> 
 
        
 
       </div> 
 
      </div> 
 
    
 
     </div>

Answer 1

をクリックすると、この色がのみ表示されますdivここではclass=informationを切り替えているようです。背景色を維持したい場合。私は.informationをラップし、あなたが望む背景色を与えるdivを作成します。 .informationに透明な背景を与えます。このように：

HTML：

 <div class="container main-content"> 
     <div class="row row-centered"> 
      <div class="col-md-3 col-centered"> 
       <img class="img-slide-down" src="media/ss_house.jpg"/> 
      </div> 
      <div class="col-md-3 col-centered"> 
       <img class="img-slide-down" src="media/ss_road.jpg" /> 
      </div> 
      <div class="col-md-3 col-centered"> 
       <img class="img-slide-down" src="media/ss_water.jpg" /> 
      </div> 
      <div class="information-wrapper"> 
       <div class="information"> 
        <video class="col-md-6 hmtlVideo" controls autoplay> 
         <source src="media/h2oF.mp4" type="video/mp4"/> 
        </video> 
        <div class="col-md-4"> 
         Lorem ipsum dolor sit amet, 
         consectetur adipiscing elit. 
         Cras sagittis pretium quam quis vehicula. 
         Ut quis tellus et diam tincidunt pretium. 
        </div> 
       </div> 
      </div> 
     </div> 

CSS：

.information { 
    display: none; 
    width: 100%; 
    background-color: transparent; 
} 

.information-wrapper { 
    margin-top: 1%; 
    background-color: #04395e; 
    height: 180px; 
    width: 100%; 
}