有四个主 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 都被隐藏，留下一个按钮已被按下的 div 2:- 按下按钮的div，同时显示主div和容器div，并且按钮的文本更改为折叠
当我们再次点击该按钮时，举行的事件是 1:- 显示所有主要 div 并隐藏容器 div 2:- 按钮的文本更改为展开 在上述事件中，许多已经实现。问题是我们无法隐藏主 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/