在显示/隐藏div中显示/隐藏div
我正在制作博客排序的网站,并且当您单击文章标题时,它会展开(此功能正常)。在其底部有一个评论按钮,用于扩展评论,即时通讯使用相同的代码来做到这一点,但它不工作。即时通讯新的JQuery,所以任何帮助将不胜感激。在显示/隐藏div中显示/隐藏div
JQuery的
$(document).ready(function() {
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function() {
$(this).next('.showArticle').slideToggle();
});
$('.commentTitle').click(function() {
$(this).next('.showComments').slideToggle();
});
});
PHP
for($i=0; $i<5; $i++)
{
print "
<a href='#' class='articleTitle'>Article name[+]</a>
<div class='showArticle'>
Article about some stuff
<br>
<a href='#' class='commentTitle'>comments[+]</a>
<div class='showComments'>
Comments go here
</div>
</div>
<br>
<br>
";
}
全码
<!DOCTYPE html>
<?php
session_start();
print "
<html>
<head>
<title>Blog</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(){
$(this).next('.showArticle').slideToggle();
});
$('.commentTitle').click(function(){
$(this).next('.showComments').slideToggle();
});
});
</script>
</head>
<body>
<header id='header'>
<div class='innertube'>
<h1>Time to blog </h1>
";
if(!isset($_SESSION['loggedin']))
{
print "You are not signed in";
}
if(isset($_SESSION['loggedin']))
{
print "<p>you are signed in as " . ($_SESSION['name']) . "<p>";
}
print "
</div>
</header>
";
print "
<!--MAIN BODY-->
<div id='wrapper'>
<main>
<div id='content'>
<div class='innertube'>
";
for($i=0; $i<5; $i++)
{
print "
<a href='#' class='articleTitle'>Article name</a>
<div class='showArticle'>
Article about some stuff
<br>
<a href='#' class='commentTitle'>comments[+]</a>
<div class='showComments'>
Comment
</div>
</div>
<br>
<br>
";
}
print "
</div>
</div>
</main>
";
print "
<nav id='nav'>
<div class='innertube'>
<h3>Pages</h3>
";
if(!isset($_SESSION['loggedin']))
{
print" <ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Sign in</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
</ul>";
}
if(isset($_SESSION['loggedin']))
{
print " <ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Sign out</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href=''>Link 5</a></li>
</ul> ";
}
</div>
</nav>
</div>
<footer id='footer'>
<div class='innertube'>
<p>Created by [email protected]</p>
</div>
</footer>
</body>
</html>
";
?>
试试这个,它应该工作
HTML
-----------------
<a href='#' class='articleTitle'>Article name[+]</a>
<div class='showArticle' style="display:none;">
Article about some stuff
<br>
<a href='#' class='commentTitle'>comments[+]</a>
<div class='showComments' style="display:none;">
Comments go here
</div>
</div>
脚本
------------ -----
$(document).ready(function(){
$('.articleTitle').click(function(){
$('.showArticle').fadeToggle(200);
});
$('.commentTitle').click(function(){
$('.showComments').fadeToggle(200);
});
});
仍然无法正常工作恐惧 –
你面对这个问题有什么问题? –
文章打开点击,但评论已显示,并点击链接(“评论标题”)它什么也没有 –
https://jsfiddle.net/arunpjohny/6cpfmejy/1/? –
适合我吗? https://jsfiddle.net/qejz28pj/ 1可能不起作用的原因是因为你打印你的HTML尝试没有'for'循环做这个 – theblackgigant
@theblackgigant循环应该不是这里的问题.. Josh,尽量提供更多的代码..你给我们的这个应该像你描述的那样工作。 – Shlizer