Динамическое раскрытие - PullRequest
Новая
       13

Динамическое раскрытие

1 голос
/ 08 августа 2010

Я работаю над блогом, и я настроил его, чтобы вы могли оставить комментарий к записи.Мне не нравится, сколько вертикального пространства используют все комментарии и форма ввода, поэтому я хотел бы иметь ссылку на каждую запись, которую вы нажимаете, и она отображает форму ввода и комментарии.Я думаю, что это ссылка "Комментарии (5)".Я вижу это все время на других сайтах, но я не знаю, как создать это сам.

Это часть HTML-кода для одной из записей: 

<div class="comments">
<form action="foxpost.php" method="post">

<label for="name">Name</label><br>
<input id="name" name="name" type="text" /><br>
<label for="message">Comment</label><br>
<textarea class="message" id="message" name="message"></textarea><br><br>
<input type="hidden" name="post_id" value="7" />

<input type="Submit" value="Post Comment" />
</form>
<?php
displayComments(7);
?>      

</div>

the displayComments ();Функция - это просто PHP, который извлекает комментарии из базы данных.

Единственное, о чем я могу подумать, - это изменить его и использовать другой идентификатор (например, "comments2", "comments3" и т. д.)для каждой области комментариев, затем используйте функцию javascript, включающую document.getElementByID (). style.display, чтобы изменить различную запись CSS для каждого div "commentsX".Это просто кажется раздутым, поэтому мне интересно, есть ли более простой способ динамически раскрывать и скрывать мою форму и функцию php, которая захватывает комментарии.

Ответы [ 2 ]

2 голосов
/ 08 августа 2010

Поскольку вы просили более простой способ, я бы выбрал jQuery, не нужно присваивать им разные идентификаторы, вы просто используете класс, и jQuery автоматически покажет соответствующий элемент, например так: 

$('a.comment').click(function(){
  $(this).nextAll('.form').slideDown('slow');
});

Где a.comment представляет ссылку с классом comment, а .form представляет класс для элемента, который содержит ваши комментарии.

0 голосов
/ 08 августа 2010

Если можно скрыть весь комментарий, вы можете просто дать ему идентификатор: 

<div class=comments id=comments>

и показать его простым JavaScript: 

document.getElementById("comments").style.display = "block"
...