我想使用 jquery 添加一些过渡效果，如滑动、淡入淡出。当有人点击标题城市时。它打开效果。我正在用 jquery 尝试它，但它不起作用。任何我错的解决方案或 css 解决方案？
Java 脚本代码:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//------------------- Jq used to show/open single div when click on title link -----------
function showDiv(obj)
{
$('.CityDivInner').css('display','block');
var div = $(obj).find('.CityDivInner').css('display','none');
}
</script>
<script>
$(document).ready(function(){
$(".CityDivOuter").click(function(){
$(".CityDivInner").slideDown("slow");
});
});
</script>
CSS 代码:
<style>
.CityDivInner
{
display:none;
}
</style>
</head>
PHP 代码:
<?php
$link = mysqli_connect("localhost", "root", "", "test");
// Check connection
if($link === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt select query execution
$sql = "SELECT * FROM sample";
if($result = mysqli_query($link, $sql))
{
if(mysqli_num_rows($result) > 0)
{
echo "<div class='cityContainer'>";
while($row = mysqli_fetch_array($result))
{
echo "<div class='cityContainerInner' style='border: 2px solid black;' >
<p class='CityDivOuter' onclick='showDiv(this);'>City</p>
<div class='CityDivInner' style='border: 1px solid black;'>
<p class='CityTitle'>". $row['UserCity'] ."</p>
</div>
</div></br>";
}
echo "</div>";
// Close result set
mysqli_free_result($result);
}
else
{
echo "No records matching your query were found.";
}
}
else
{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
</body>
最佳答案
检查这段代码，这可能对你有帮助!
$(document).ready(function(){
$('.expand').hide();
$(".expand, .collapse").click(function(){
$(".CityDivInner").slideToggle("slow");
$('.expand').toggle();
$('.collapse').toggle();
});
});.CityDivInner{
width:300px;
height:100px;
background:#888;
}
.expand, .collapse{
margin:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CityDivInner"></div>
<button class="expand">Expand</button>
<button class="collapse">Collpase</button>关于javascript - 如何在php页面中打开带有过渡效果的关闭div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38760972/