如何在崩潰時爲div設置圖片，然後如果我點擊展開需要展示內容？

我有一個具有展開摺疊功能的三個div。如果我展開一個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另外兩個DIV我需要隱藏的內容和表現出一定的glyphicons這樣的形象

一些事情

來源

2016-12-27 Suresh B

圖像不開放 – ab29007

我不知道如何設置圖像，而擴大div –

我的意思是您所包含的圖像無法打開。編輯問題 – 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

同時展開在其他兩個div需要點擊按鈕 –

好的。你能給我兩分鐘嗎？ – ab29007

對不起。現在就試試。讓我知道如果有什麼遺漏 – ab29007

看到此鏈接選擇當前父，我希望這是幫助全面https://jsfiddle.net/AwadheshVerma/rL5mdz68/

來源

2016-12-27 12:08:22

如何在崩潰時爲div設置圖片，然後如果我點擊展開需要展示內容？

回答

相關問題