在顯示/隱藏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

回答

相關問題