Question

我正在制作一个博客类网站，当你点击文章标题时它会扩展（这很好）。在这个底部有一个注释按钮，可以扩展注释，我使用相同的代码来执行此操作，但它不起作用。我是JQuery的新手，所以任何帮助都会非常感激。

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 JReilly@14412625</p>
</div>
</footer>

</body>
</html>
";
?>

Answer 1

试试这个，它应该可行

<强> 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);
    });
});

在show / hide div

1 个答案: