如何在崩溃时为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设置图片，然后如果我点击展开需要展示内容？

回答

相关问题