-1
我想在沒有調整此元素大小的情況下單擊圖像後將元素顯示到我的表格中。但很明顯，行的大小就越大。CSS：沒有重新縮放「表格」的顯示元素
var lastelementmenu;
var event_cache_site = document.querySelector('.event_cache_site');
var properties = document.querySelectorAll(".event_list_view_properties_click");//3 points
for(var i= 0 ;i<properties.length;i++){
//evenement au click
properties[i].addEventListener('click',function(e){
var div = this.nextElementSibling;
lastelementmenu = div;
div.style.display = "block";
event_cache_site.style.display = "block";
});
}
event_cache_site.addEventListener('click',() => {
lastelementmenu.style.display = "none";
event_cache_site.style.display = "none";
});*{
font-size:16px;
box-sizing: border-box;
}
html{
font-size:50%;
background-color: #f5f5f5;
}
.event_list_view{
width: 150rem;
margin: 5rem auto;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
font-size: 1.5rem;
}
.event_list_view tbody{
background-color: #fff;
}
.event_list_view thead tr{
border-bottom: 0px solid rgba(0,0,0,0.54);
box-shadow: 0 -1px 0 rgba(0,0,0,0.12) inset;
}
.event_list_view_array{
width: 100%;
border-collapse: collapse;
}
.event_list_view_cell{
padding: 3rem 2rem;
}
.event_list_view_array thead{
/*background-color: #f5f5f5;*/
background-color: transparent;
}
.event_list_view_array thead th{
color: rgba(0,0,0,0.54);
font-weight: normal;
font-family: Roboto,"Helvetica Neue",sans-serif
}
.event_list_view_new{
background: rgb(3, 155, 229);
float: right;
margin : 1rem ;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.event_list_view_new p{
padding: 0rem 1rem;
}
.event_list_view_new a{
text-decoration: none;
color: #FFF;
}
.event_list_view_legend{
padding: 1rem 2rem;
text-align: left;
}
.event_list_view_properties{
background-color: #fff;
display: none;
z-index: 17;
position: relative;
top: -5rem;
padding: 0rem 1rem;
left: -7rem;
width: 10rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.event_list_view_properties ul {
list-style-type: none;
margin: 0rem 0rem;
padding: 0rem;
}
.event_list_view_properties li {
padding: 0.5rem 0rem;
}
.event_list_view_properties a {
text-decoration: none;
color: rgba(0,0,0,0.5);
margin: 1rem 0rem;
}
.event_list_view_properties_bg{/*
background-image: url(../images/icon/properties.svg);
width: 10rem;
height: 5rem;*/
}
.event_cache_site{
z-index: 14;
position: fixed;
top: 0;
bottom:0;
left: 0;
right: 0;
background: none;
}<html>
<table class="event_list_view_array">
\t <thead>
\t \t <tr>
\t \t \t <th colspan="5"><div class="event_list_view_new"><a href="?state=new"><p >NOUVEL EVENEMENT</p></a></div></th>
\t \t <tr>
\t \t <tr>
\t \t \t <th><div class="event_list_view_legend">Titre</div></th>
\t \t \t <th><div class="event_list_view_legend">Contenu</div></th>
\t \t \t <th><div class="event_list_view_legend">Date</div></th>
\t \t \t <th><div class="event_list_view_legend">Groupe</div></th>
\t \t \t <th><div class="event_list_view_legend"></div></th>
\t \t </tr>
\t </thead>
\t <tbody>
\t \t <col span="1" style="width: 15%;">
\t \t <col span="1" style="width: 60%;">
\t \t <col span="1" style="width: 15%;">
\t \t <col span="1" style="width: 5%;">
\t \t <col span="1" style="width: 5%;">';
\t \t <tr>
\t \t \t <td><div class="event_list_view_cell"> title0 </div></td>
\t \t \t <td><div class="event_list_view_cell">content0</div></td>
\t \t \t <td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
\t \t \t <td><div class="event_list_view_cell">A</div></td>
\t \t \t <td>
\t \t \t \t <div class="event_list_view_cell event_list_view_properties_click" >
\t \t \t \t \t <img src="images/icon/properties.svg" alt="properties">
\t \t \t \t </div>
\t \t \t \t <div class="event_list_view_cell event_list_view_properties">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Modifier</a></li>
\t \t \t \t \t \t <li><a href="#">supprimer</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t <td><div class="event_list_view_cell"> title1 </div></td>
\t \t \t <td><div class="event_list_view_cell">content1</div></td>
\t \t \t <td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
\t \t \t <td><div class="event_list_view_cell">A</div></td>
\t \t \t <td>
\t \t \t \t <div class="event_list_view_cell event_list_view_properties_click" >
\t \t \t \t \t <img src="images/icon/properties.svg" alt="properties">
\t \t \t \t </div>
\t \t \t \t <div class="event_list_view_cell event_list_view_properties">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Modifier</a></li>
\t \t \t \t \t \t <li><a href="#">supprimer</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t <td><div class="event_list_view_cell"> title2 </div></td>
\t \t \t <td><div class="event_list_view_cell">content2</div></td>
\t \t \t <td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
\t \t \t <td><div class="event_list_view_cell">A</div></td>
\t \t \t <td>
\t \t \t \t <div class="event_list_view_cell event_list_view_properties_click" >
\t \t \t \t \t <img src="images/icon/properties.svg" alt="properties">
\t \t \t \t </div>
\t \t \t \t <div class="event_list_view_cell event_list_view_properties">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Modifier</a></li>
\t \t \t \t \t \t <li><a href="#">supprimer</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </td>
\t \t </tr>
\t </tbody>
</table>
<div class="event_cache_site" style="display:none;"></div>
</html>After clicking 我該如何解決呢？ 謝謝
喜托馬斯，讓我們能重現問題的一些工作代碼。 –
對不起，我忘記了一個codepen鏈接。我編輯我的帖子謝謝。 –