gpt4 book ai didi

javascript - 仅显示选定的 Div 并隐藏所有其他 Div

转载 作者:行者123 更新时间:2023-11-30 12:32:23 24 4
gpt4 key购买 nike

有四个主 div,我有一个按钮和主 div 中的另一个容器 div。当我按下按钮时,容器 div 可见并且按钮的文本发生变化但所有主要 div 都可见我的问题是我想隐藏所有其他 div,按下按钮的主 div 应该与容器 div 一起可见其他主要的 div 应该被隐藏。但我无法隐藏其他主要 div

<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
$(document).ready(function(){

$('.myButton').click(function(){
if ( this.value == 'collapse' ) {
// if it's open close it
open = false;
this.value = 'expand';
$(this).next("div.container").hide("slow");
}
else {
// if it's close open it
open = true;
this.value = 'collapse';
$(this).next("div.container").show("slow");



}
});

});
</script>



</head>
<body>
<?php
for($i=0;$i<=3;$i++)
{
echo"<div class='main' style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;width:84%; '>
<b> sometext:-</b><a href='#'>$url</a><br>
<b>sometext :</b>$b<br>
<b>sometext :</b>$c<br>
<b>sometext :</b>$d<br>
<b>sometext :</b>$e<br>
<b>sometext :</b>$f<br>
<b>sometext :</b>$g</p>
<input type='button' value='expand' class='myButton' target='".$i."' style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font- size:15px;' >$i";

echo "<div class='container' style='display:none;background:white; '>

<b> sometext:-</b><a href='#'>$url</a><br>
<b>sometext :</b>$b<br>
<b>sometext :</b>$c<br>
<b>sometext :</b>$d<br>
<b>sometext :</b>$e<br>
<b>sometext :</b>$f<br>
<b>sometext :</b>$g</p>
</div>";

echo "</div><br><br>";

}
?>

</body>
</html>

当我们点击一​​个按钮时,会发生两个事件1:- 所有其他主要 div 和容器 div 都被隐藏,留下一个按钮已被按下的 div2:- 按下按钮的div,同时显示主div和容器div,并且按钮的文本更改为折叠

当我们再次点击该按钮时,举行的事件是1:- 显示所有主要 div 并隐藏容器 div2:- 按钮的文本更改为展开在上述事件中,许多已经实现。问题是我们无法隐藏主 div 的其余部分,留下按钮已被按下的当前主 div

最佳答案

你可以像这样隐藏其余的容器

$(document).ready(function() {
var $mains = $('.main');
var $bts = $('.myButton').click(function() {
var $ct = $(this).next("div.container"),
$main = $(this).closest('.main');
if (this.value == 'collapse') {
this.value = 'expand';
$ct.hide("slow");
$mains.not($main).show()
} else {
this.value = 'collapse';
$ct.show("slow");
$mains.not($main).hide()
}
//hide other container elements
$('div.container').not($ct).hide();
$bts.not(this).val('expand');
});
});

$(document).ready(function() {
var $mains = $('.main');
var $bts = $('.myButton').click(function() {
var $ct = $(this).next("div.container"),
$main = $(this).closest('.main');
if (this.value == 'collapse') {
this.value = 'expand';
$ct.hide("slow");
$mains.not($main).show()
} else {
this.value = 'collapse';
$ct.show("slow");
$mains.not($main).hide()
}
//hide other container elements
$('div.container').not($ct).hide();
$bts.not(this).val('expand');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='main' style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;width:84%; '>
<b> sometext:-</b><a href='#'>$url</a>
<br>
<b>sometext :</b>$b
<br>
<b>sometext :</b>$c
<br>
<b>sometext :</b>$d
<br>
<b>sometext :</b>$e
<br>
<b>sometext :</b>$f
<br>
<b>sometext :</b>$g
<input type='button' value='expand' class='myButton' target='".$i."' style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font- size:15px;'>$i"; echo "
<div class='container' style='display:none;background:white; '> <b> sometext:-</b><a href='#'>$url</a>

<br>
<b>sometext :</b>$b
<br>
<b>sometext :</b>$c
<br>
<b>sometext :</b>$d
<br>
<b>sometext :</b>$e
<br>
<b>sometext :</b>$f
<br>
<b>sometext :</b>$g</div>
</div>

<div class='main' style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;width:84%; '>
<b> sometext:-</b><a href='#'>$url</a>
<br>
<b>sometext :</b>$b
<br>
<b>sometext :</b>$c
<br>
<b>sometext :</b>$d
<br>
<b>sometext :</b>$e
<br>
<b>sometext :</b>$f
<br>
<b>sometext :</b>$g
<input type='button' value='expand' class='myButton' target='".$i."' style='position:absolute;left:85%;top:4%;background:#B20000;color:white;width:70px;height:20px;font- size:15px;'>$i"; echo "
<div class='container' style='display:none;background:white; '> <b> sometext:-</b><a href='#'>$url</a>

<br>
<b>sometext :</b>$b
<br>
<b>sometext :</b>$c
<br>
<b>sometext :</b>$d
<br>
<b>sometext :</b>$e
<br>
<b>sometext :</b>$f
<br>
<b>sometext :</b>$g</div>
</div>

关于javascript - 仅显示选定的 Div 并隐藏所有其他 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27264749/

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