在显示/隐藏 div 中显示/隐藏 div答案

【问题标题】：show/hide div inside a show/hide div在显示/隐藏 div 中显示/隐藏 div
【发布时间】：2016-03-03 07:52:12
【问题描述】：

我正在制作一个类似博客的网站，当您单击文章标题时，它会展开（这很好用）。在此底部有一个扩展 cmets 的注释按钮，我使用相同的代码来执行此操作，但它不起作用。我是 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>
";
?>

【问题讨论】：

jsfiddle.net/arunpjohny/6cpfmejy/1 ?
适合我吗？ jsfiddle.net/qejz28pj 1 它可能不起作用的原因是因为您打印 HTML 尝试在没有 for 循环的情况下进行操作
@theblackgigant 循环不应该是这里的问题。乔希，试着提供更多的代码。你给我们的这个应该像你描述的那样工作。
循环对我有用
需要循环，因为这将通过数据库生成

标签： javascript php jquery html show-hide

【解决方案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);
    });
});

【讨论】：

你面临的问题是什么？
文章在点击时打开，但 cmets 已经显示，点击链接（“评论标题”）它什么也不做
谢谢，还是不行，是打印的问题吗？还是循环？
不需要循环，打印必须没问题...我不知道 PHP。
我会做更多的研究，感谢到目前为止的所有帮助