折りたたみ中にdivの画像を設定するにはどうすればいいですか？

私には、折り畳み機能を拡張した3つのdivがあります。 1つのdivを展開すると、他のdivにイメージを設定する必要があります。私は戻って通常モードに私は、元のコンテンツに必要がある場合は、そのdivの内側に折りたたみ中にdivの画像を設定するにはどうすればいいですか？

$("a.expansion-btn").click(function(){ 
 
    classes = this.className; 
 
    var divNumber = classes.slice(-1); 
 
    var toGetId = "#div-"+divNumber; 
 
    if ($(toGetId).hasClass("expanded-div")){ 
 
    $(".normal-div").removeClass("compressed-div"); 
 
    $(".normal-div").removeClass("expanded-div"); 
 
    } 
 
    else{ 
 
    $(".normal-div").removeClass("compressed-div"); 
 
    $(".normal-div").removeClass("expanded-div"); 
 
    $(".normal-div").addClass("compressed-div"); 
 
    $(toGetId).removeClass("compressed-div"); 
 
    $(toGetId).addClass("expanded-div");  
 
    } 
 
});

*{ 
 
    box-sizing:border-box; 
 
} 
 
.contenth1{ 
 
    height:20%; 
 
} 
 
.contenth2{ 
 
    height:70%; 
 
} 
 
.container{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:400px; 
 
} 
 
.normal-div{ 
 
    width:33.33%; 
 
    height:100%; 
 
    position:relative; 
 
    border:2px solid black; 
 
    float:left; 
 
} 
 
.expanded-div{ 
 
    width:80%; 
 
} 
 
.compressed-div{ 
 
    width:10%; 
 
} 
 
#div-1{ 
 
    
 
} 
 
#div-2{ 
 
    
 
} 
 
#div-3{ 
 
    
 
} 
 
a.expansion-btn{ 
 
    position:absolute; 
 
    top:10px; 
 
    right:10px; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="normal-div" id="div-1"> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-1">click</a> 
 
    </div > 
 
    <div class="contenth2">one</div> 
 
    </div> 
 
    <div class="normal-div" id="div-2"> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-2">click</a> 
 
    </div> 
 
    <div class="contenth2">two</div> 
 
    </div> 
 
    <div class="normal-div" id="div-3"> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-3">click</a> 
 
    </div> 
 
    <div class="contenth2">three</div> 
 
    </div> 
 
    </div>

例が存在するどのような： - ：ながら - 通常モードでがファイン

例1作品divを他の2つのdivに展開するコンテンツを隠し、グリフィンアイコンをいくつか表示する必要があります

出典

2016-12-27 Suresh B

画像が開きません – ab29007

divを展開中に画像を設定する方法がわかりません –

私はthを意味しますあなたが問題になっている画像は開かれていません。質問を編集する – ab29007

の z-indexを削除

.compressed-divクラスに背景画像を追加するだけです。そしてdisplay:noneまた

.compressed-div .contenth2に、私はあなたがidと

$("a.expansion-btn").click(function(){ 
 
    var thisDiv = $(this).closest('.normal-div'); 
 
    if (thisDiv.hasClass("expanded-div")){ 
 
    $(".normal-div").removeClass("compressed-div"); 
 
    $(".normal-div").removeClass("expanded-div"); 
 
    } 
 
    else{ 
 
    $(".normal-div").removeClass("compressed-div"); 
 
    $(".normal-div").removeClass("expanded-div"); 
 
    $(".normal-div").addClass("compressed-div"); 
 
    $(thisDiv).removeClass("compressed-div"); 
 
    $(thisDiv).addClass("expanded-div");  
 
    } 
 
});

*{ 
 
    box-sizing:border-box; 
 
} 
 
.contenth1{ 
 
    height:20%; 
 
} 
 
.contenth2{ 
 
    height:70%; 
 
} 
 
.container{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:400px; 
 
} 
 
.normal-div{ 
 
    width:33.33%; 
 
    height:100%; 
 
    position:relative; 
 
    border:2px solid black; 
 
    float:left; 
 
} 
 
.expanded-div{ 
 
    width:80%; 
 
} 
 
.compressed-div{ 
 
    width:10%; 
 
    background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCN90DSaAG4pFAZaMxlsrfTUAebqMI4ZOTwjCCDvoVL7caW9mj"); 
 
} 
 
.compressed-div .contenth2{ 
 
display:none; 
 
} 
 
#div-1{ 
 
    
 
} 
 
#div-2{ 
 
    
 
} 
 
#div-3{ 
 
    
 
} 
 
a.expansion-btn{ 
 
    position:absolute; 
 
    top:10px; 
 
    right:10px; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="normal-div" id="div-1"> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-1">click</a> 
 
    </div > 
 
    <div class="contenth2">one</div> 
 
    </div> 
 
    <div class="normal-div" id="div-2"> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-2">click</a> 
 
    </div> 
 
    <div class="contenth2">two</div> 
 
    </div> 
 
    <div class="normal-div" id="div-3"> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-3">click</a> 
 
    </div> 
 
    <div class="contenth2">three</div> 
 
    </div> 
 
    </div>

出典

2016-12-27 11:41:45 anu

コンテンツはクリック以外で隠す必要があります –

更新された回答を確認する – anu

これを試してください。私はちょうど楽しみのためにgifを加えましたが、あなたはそれを通常の画像に置き換えることができます。

そして、あなたが繰り返される背景を好きではない場合、.coverUp

にbackground-repeat:no-repeat;を設定し、それらもcompressed div内のコンテンツを見たいならば、.coverUp

$("a.expansion-btn").click(function(){ 
 
    classes = this.className; 
 
    var divNumber = classes.slice(-1); 
 
    var toGetId = "#div-"+divNumber; 
 
    if ($(toGetId).hasClass("expanded-div")){ 
 
    $(".normal-div").removeClass("compressed-div expanded-div"); 
 
    } 
 
    else{ 
 
    $(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div"); 
 
    $(toGetId).removeClass("compressed-div").addClass("expanded-div");  
 
    } 
 
});

*{ 
 
    box-sizing:border-box; 
 
} 
 
.contenth1{ 
 
    height:20%; 
 
} 
 
.contenth2{ 
 
    height:70%; 
 
} 
 
.container{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:400px; 
 
} 
 
.normal-div{ 
 
    width:33.33%; 
 
    height:100%; 
 
    position:relative; 
 
    border:2px solid black; 
 
    float:left; 
 
} 
 
.expanded-div{ 
 
    width:80%; 
 
} 
 
.compressed-div{ 
 
    width:10%; 
 
} 
 
.coverUp{ 
 
    position:absolute; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    background-color:white; 
 
    background-image:url('http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif'); 
 
    background-position:center; 
 
    background-size:contain; 
 
    left:0; 
 
    display:none; 
 
    z-index:-1; 
 
} 
 
.compressed-div .coverUp{ 
 
    display:block; 
 
} 
 

 
#div-1{ 
 
    
 
} 
 
#div-2{ 
 
    
 
} 
 
#div-3{ 
 
    
 
} 
 
a.expansion-btn{ 
 
    position:absolute; 
 
    top:10px; 
 
    right:10px; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    z-index:999; 
 
} 
 
.compressed-div .contenth2{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="normal-div" id="div-1"> 
 
    <div class="coverUp"></div> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-1">click</a> 
 
    </div > 
 
    <div class="contenth2">one</div> 
 
    </div> 
 
    <div class="normal-div" id="div-2"> 
 
    <div class="coverUp"></div> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-2">click</a> 
 
    </div> 
 
    see it? 
 
    <div class="contenth2">two</div> 
 
    </div> 
 
    <div class="normal-div" id="div-3"> 
 
    <div class="coverUp"></div> 
 
    <div class="contenth1"> 
 
     <a class="expansion-btn exp-3">click</a> 
 
    </div> 
 
    <div class="contenth2">three</div> 
 
    </div> 
 
    </div>

出典

2016-12-27 11:39:45 ab29007

拡大中他の2つのdivでボタンをクリックする必要があります –

ok。 2分くらいでくれますか？申し訳ありません。 – ab29007

やってみよう。 – ab29007

は、このリンクを参照してくださいカウンターに依存する必要がいけないように、現在の親を選択するためのセレクタを改善している、私はこれがあると思いますヘルプfullhttps：//jsfiddle.net/AwadheshVerma/rL5mdz68/

出典

2016-12-27 12:08:22

折りたたみ中にdivの画像を設定するにはどうすればいいですか？

答えて

関連する問題