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

-1

我正在制作博客排序的网站，并且当您单击文章标题时，它会展开（此功能正常）。在其底部有一个评论按钮，用于扩展评论，即时通讯使用相同的代码来做到这一点，但它不工作。即时通讯新的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> 
"; 
?>

来源

2016-03-03 josh reilly

https://jsfiddle.net/arunpjohny/6cpfmejy/1/？ –

适合我吗？ https://jsfiddle.net/qejz28pj/ 1可能不起作用的原因是因为你打印你的HTML尝试没有'for'循环做这个 – theblackgigant

@theblackgigant循环应该不是这里的问题.. Josh，尽量提供更多的代码..你给我们的这个应该像你描述的那样工作。 – Shlizer

试试这个，它应该工作

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

来源

2016-03-03 09:11:38

仍然无法正常工作恐惧 –

你面对这个问题有什么问题？ –

文章打开点击，但评论已显示，并点击链接（“评论标题”）它什么也没有 –

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

回答

相关问题