gpt4 book ai didi

jquery - 更改单个div的高度(Flexbox)

转载 作者:行者123 更新时间:2023-12-01 08:38:24 25 4
gpt4 key购买 nike

我有一个问题,我做了一个类(class)显示,带有标题和编号,有一个小图标“+”,如果点击它会显示相关类(class)的内容,仍然有一个“+”,它显示问题。

一切都有效,除了我的类两两对齐,如果第 1 类的 div 变大,第 2 类的 div 也会变大,但我不希望第二个类改变:( 好吧,这是示例 :) 抱歉太长了!

$('.detailscours').hide()
$('.detailsquestion').hide()

var bonrep= 'reponse4';
var bonrep= '#'+bonrep + '1';
$(bonrep).css("border","1px solid green");

$(".imagesuppr").click(function(){
var r = confirm("Etes-vous sur de vouloir supprimer cette question?");
if (r == true) {
var valeur= $(this).attr('value');
var formcour="elle"+valeur;
document.getElementById(formcour).submit();
}
});

$(".imagesedit").click(function(){

var valeur= $(this).attr('value');
var formcour="formedit"+valeur;
document.getElementById(formcour).submit();

});

$("#bouttonverrou").click(function(){
document.getElementById("deverquest").submit();
})


$(".detailscoursplus").click(function(){
value = $(this).attr('value')
displaycours="#detailscours"+ value;
$(displaycours).toggle("slow")

})

$(".detailsquestionplus").click(function(){
value = $(this).attr('value')
displayquestion="#detailsquestion"+ value;
$(displayquestion).toggle("slow")

})
.question{border:1px solid;
width: 40%;
text-align: center;
margin:2% auto;
}
.groupe{display: flex;
flex-wrap: wrap;
justify-content: center;

}
table{
text-align: center;
width: 100%;
}

#save{
display:none;

}
#accueil{margin-left:1% !important;}

#listequestion{
display: flex;
flex-wrap: wrap;
}
.imagesuppr
{
float:right;
width:32px;
cursor:pointer;

}

.imagesedit
{
float:right;
width:32px;
cursor:pointer;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="listequestion">



<div class="question">

<form method="post" id="elle1" name="coucou" action="./traitement.php">
<input type="hidden" name="courssuppr" value="1">
<br>
<h2>Cours 1</h2>



<p>bqfqfdbdfqb </p><br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
<div class="detailscours" id="detailscours1" style="display: block;">
<p>
</p><p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px"></p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
<div class="detailsquestion" id="detailsquestion1" style="display: block;">


<h2>Question : </h2>
<p>nouvelle question </p><br>

<table>
<tbody><tr>
<td id="reponse11">
reponse la 1
</td>
<td id="reponse21">
et la 2
</td>
</tr>
<tr>
<td id="reponse31">
ici la 3 </td>
<td id="reponse41" style="border: 1px solid green;">
la bonne reponse 4
</td>
</tr>
</tbody></table>



</div>
</div>
</form></div>





<form method="post" id="formedit1" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="1">
</form>







<div class="question">

<form method="post" id="elle2" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="2">
<br>
<h2>Cours 2</h2>



<p>rvrvervre </p><br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
<div class="detailscours" id="detailscours2" style="display: none;">
<p>
</p><p>mon texte par défautervvqervqerervervq</p>

<p>ervqervqerveqrv</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
<div class="detailsquestion" id="detailsquestion2" style="display: none;">


<h2>Question : </h2>
<p>gwdh </p><br>

<table>
<tbody><tr>
<td id="reponse12">
fdhwfdhwdh
</td>
<td id="reponse22">
wdfhwdfh
</td>
</tr>
<tr>
<td id="reponse32">
wdhwdfh </td>
<td id="reponse42" style="border: 1px solid green;">
wdhwdfh
</td>
</tr>
</tbody></table>



</div>
</div>
</form></div>





<form method="post" id="formedit2" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="2">
</form>







<div class="question">

<form method="post" id="elle3" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="3">
<br>
<h2>Cours 3</h2>



<p>bqfqfdbdfqb </p><br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
<div class="detailscours" id="detailscours3" style="display: none;">
<p>
</p><p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px"></p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
<div class="detailsquestion" id="detailsquestion3" style="display: none;">


<h2>Question : </h2>
<p>gbgbgb </p><br>

<table>
<tbody><tr>
<td id="reponse13" style="border: 1px solid green;">
sfgbsfgbsfg
</td>
<td id="reponse23">
sgfbsfgb
</td>
</tr>
<tr>
<td id="reponse33">
sfgbsgfb </td>
<td id="reponse43">
sfgbsgfbfsgb
</td>
</tr>
</tbody></table>



</div>
</div>
</form></div>





<form method="post" id="formedit3" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="3">
</form>







<div class="question">

<form method="post" id="elle4" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="4">
<br>
<h2>Cours 4</h2>



<p>hello </p><br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
<div class="detailscours" id="detailscours4" style="display: none;">
<p>
</p><p>mon texte par défapremier cours</p>

<p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:321px; width:500px"></p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
<div class="detailsquestion" id="detailsquestion4" style="display: none;">


<h2>Question : </h2>
<p>vaerva </p><br>

<table>
<tbody><tr>
<td id="reponse14">
avaraervr
</td>
<td id="reponse24">
vrveaevae
</td>
</tr>
<tr>
<td id="reponse34">
vaevaerv </td>
<td id="reponse44" style="border: 1px solid green;">
aevaervaev
</td>
</tr>
</tbody></table>



</div>
</div>
</form></div>





<form method="post" id="formedit4" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="4">
</form>







<div class="question">

<form method="post" id="elle5" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="5">
<br>
<h2>Cours 5</h2>



<p>dbsfbf </p><br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
<div class="detailscours" id="detailscours5" style="display: none;">
<p>
</p><p>mon texte par défautrgqerv</p>

<p>revervrev</p>

<p>rvaervaervver</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
<div class="detailsquestion" id="detailsquestion5" style="display: none;">


<h2>Question : </h2>
<p>qdfvqdvqd </p><br>

<table>
<tbody><tr>
<td id="reponse15">
vqfdvqqfdvq
</td>
<td id="reponse25">
vqdvqdvqfd
</td>
</tr>
<tr>
<td id="reponse35" style="border: 1px solid green;">
qdfvqfdv </td>
<td id="reponse45">
fvqdvqdvqdvqdfv
</td>
</tr>
</tbody></table>


</div>
</div>
</form></div>





<form method="post" id="formedit5" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="5">
</form>







<div class="question">

<form method="post" id="elle6" name="coucou" action="./traitement.php">
<img class="imagesuppr" src="../images/delete.PNG" value="6">
<img class="imagesedit" src="../images/edit.PNG" value="6">
<input type="hidden" name="courssuppr" value="6">
<br>
<h2>Cours 6</h2>



<p>rvrvervre </p><br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
<div class="detailscours" id="detailscours6" style="display: none;">
<p>
</p><p>mon texte par défautervvqervqerervervq</p>

<p>ervqervqerveqrv</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
<div class="detailsquestion" id="detailsquestion6" style="display: none;">


<h2>Question : </h2>
<p>qdfvqdfv </p><br>

<table>
<tbody><tr>
<td id="reponse16">
qdfvqdvqdf
</td>
<td id="reponse26">
vqdfvqdfv
</td>
</tr>
<tr>
<td id="reponse36">
qdfvqdfv </td>
<td id="reponse46" style="border: 1px solid green;">
qdfvqdvqdfvqd
</td>
</tr>
</tbody></table>



</div>
</div>
</form></div>





<form method="post" id="formedit6" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="6">
</form>

最佳答案

只需更改:

#listequestion { display: flex; flex-wrap: wrap; } 

至:

#listequestion { display: flex; flex-wrap: wrap; align-items: flex-start; } 

在你的CSS中。您可以看到下面的代码片段。

$('.detailscours').hide()
$('.detailsquestion').hide()

var bonrep= 'reponse4';
var bonrep= '#'+bonrep + '1';
$(bonrep).css("border","1px solid green");

$(".imagesuppr").click(function(){
var r = confirm("Etes-vous sur de vouloir supprimer cette question?");
if (r == true) {
var valeur= $(this).attr('value');
var formcour="elle"+valeur;
document.getElementById(formcour).submit();
}
});

$(".imagesedit").click(function(){

var valeur= $(this).attr('value');
var formcour="formedit"+valeur;
document.getElementById(formcour).submit();

});

$("#bouttonverrou").click(function(){
document.getElementById("deverquest").submit();
})


$(".detailscoursplus").click(function(){
value = $(this).attr('value')
displaycours="#detailscours"+ value;
$(displaycours).toggle("slow")

})

$(".detailsquestionplus").click(function(){
value = $(this).attr('value')
displayquestion="#detailsquestion"+ value;
$(displayquestion).toggle("slow")

})
.question { border:1px solid; width: 40%; text-align: center; margin:2% auto; } 
.groupe { display: flex; flex-wrap: wrap; justify-content: center; }
table { text-align: center; width: 100%; }
#save { display:none; }
#accueil { margin-left:1% !important; }
#listequestion { display: flex; flex-wrap: wrap; align-items: flex-start; }
.imagesuppr { float:right; width:32px; cursor:pointer; }
.imagesedit { float:right; width:32px; cursor:pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="listequestion">



<div class="question">

<form method="post" id="elle1" name="coucou" action="./traitement.php">
<input type="hidden" name="courssuppr" value="1">
<br>
<h2>Cours 1</h2>



<p>bqfqfdbdfqb </p>
<br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
<div class="detailscours" id="detailscours1" style="display: block;">
<p>
</p>
<p>
<img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px">
</p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
<div class="detailsquestion" id="detailsquestion1" style="display: block;">


<h2>Question : </h2>
<p>nouvelle question </p>
<br>

<table>
<tbody>
<tr>
<td id="reponse11">
reponse la 1
</td>
<td id="reponse21">
et la 2
</td>
</tr>
<tr>
<td id="reponse31">
ici la 3 </td>
<td id="reponse41" style="border: 1px solid green;">
la bonne reponse 4
</td>
</tr>
</tbody>
</table>



</div>
</div>
</form>
</div>





<form method="post" id="formedit1" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="1">
</form>







<div class="question">

<form method="post" id="elle2" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="2">
<br>
<h2>Cours 2</h2>



<p>rvrvervre </p>
<br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
<div class="detailscours" id="detailscours2" style="display: none;">
<p>
</p>
<p>mon texte par défautervvqervqerervervq</p>

<p>ervqervqerveqrv</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
<div class="detailsquestion" id="detailsquestion2" style="display: none;">


<h2>Question : </h2>
<p>gwdh </p>
<br>

<table>
<tbody>
<tr>
<td id="reponse12">
fdhwfdhwdh
</td>
<td id="reponse22">
wdfhwdfh
</td>
</tr>
<tr>
<td id="reponse32">
wdhwdfh </td>
<td id="reponse42" style="border: 1px solid green;">
wdhwdfh
</td>
</tr>
</tbody>
</table>



</div>
</div>
</form>
</div>





<form method="post" id="formedit2" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="2">
</form>







<div class="question">

<form method="post" id="elle3" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="3">
<br>
<h2>Cours 3</h2>



<p>bqfqfdbdfqb </p>
<br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
<div class="detailscours" id="detailscours3" style="display: none;">
<p>
</p>
<p>
<img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px">
</p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
<div class="detailsquestion" id="detailsquestion3" style="display: none;">


<h2>Question : </h2>
<p>gbgbgb </p>
<br>

<table>
<tbody>
<tr>
<td id="reponse13" style="border: 1px solid green;">
sfgbsfgbsfg
</td>
<td id="reponse23">
sgfbsfgb
</td>
</tr>
<tr>
<td id="reponse33">
sfgbsgfb </td>
<td id="reponse43">
sfgbsgfbfsgb
</td>
</tr>
</tbody>
</table>



</div>
</div>
</form>
</div>





<form method="post" id="formedit3" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="3">
</form>







<div class="question">

<form method="post" id="elle4" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="4">
<br>
<h2>Cours 4</h2>



<p>hello </p>
<br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
<div class="detailscours" id="detailscours4" style="display: none;">
<p>
</p>
<p>mon texte par défapremier cours</p>

<p>
<img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:321px; width:500px">
</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
<div class="detailsquestion" id="detailsquestion4" style="display: none;">


<h2>Question : </h2>
<p>vaerva </p>
<br>

<table>
<tbody>
<tr>
<td id="reponse14">
avaraervr
</td>
<td id="reponse24">
vrveaevae
</td>
</tr>
<tr>
<td id="reponse34">
vaevaerv </td>
<td id="reponse44" style="border: 1px solid green;">
aevaervaev
</td>
</tr>
</tbody>
</table>



</div>
</div>
</form>
</div>





<form method="post" id="formedit4" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="4">
</form>







<div class="question">

<form method="post" id="elle5" name="coucou" action="./traitement.php">

<input type="hidden" name="courssuppr" value="5">
<br>
<h2>Cours 5</h2>



<p>dbsfbf </p>
<br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
<div class="detailscours" id="detailscours5" style="display: none;">
<p>
</p>
<p>mon texte par défautrgqerv</p>

<p>revervrev</p>

<p>rvaervaervver</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
<div class="detailsquestion" id="detailsquestion5" style="display: none;">


<h2>Question : </h2>
<p>qdfvqdvqd </p>
<br>

<table>
<tbody>
<tr>
<td id="reponse15">
vqfdvqqfdvq
</td>
<td id="reponse25">
vqdvqdvqfd
</td>
</tr>
<tr>
<td id="reponse35" style="border: 1px solid green;">
qdfvqfdv </td>
<td id="reponse45">
fvqdvqdvqdvqdfv
</td>
</tr>
</tbody>
</table>


</div>
</div>
</form>
</div>





<form method="post" id="formedit5" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="5">
</form>







<div class="question">
<form method="post" id="elle6" name="coucou" action="./traitement.php">
<img class="imagesuppr" src="../images/delete.PNG" value="6">
<img class="imagesedit" src="../images/edit.PNG" value="6">
<input type="hidden" name="courssuppr" value="6">
<br>
<h2>Cours 6</h2>
<p>rvrvervre </p>
<br>
<img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
<div class="detailscours" id="detailscours6" style="display: none;">
<p>
</p>
<p>mon texte par défautervvqervqerervervq</p>
<p>ervqervqerveqrv</p>
<p></p>
<img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
<div class="detailsquestion" id="detailsquestion6" style="display: none;">
<h2>Question : </h2>
<p>qdfvqdfv </p>
<br>
<table>
<tbody>
<tr>
<td id="reponse16">
qdfvqdvqdf
</td>
<td id="reponse26">
vqdfvqdfv
</td>
</tr>
<tr>
<td id="reponse36">
qdfvqdfv </td>
<td id="reponse46" style="border: 1px solid green;">
qdfvqdvqdfvqd
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
<form method="post" id="formedit6" name="editquest" action="./editcours.php" style="display:none">
<input type="hidden" name="coursedit" value="6">
</form>

关于jquery - 更改单个div的高度(Flexbox),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50644257/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com