Как сделать сворачиваемое поле для комментариев, например Stackoverflow
Я создаю сайт, и у меня есть список обновлений статуса, и я хочу разрешить пользователям писать комментарии для каждого из элементов в списке.
Однако я пытаюсь реализовать пользовательский интерфейс, аналогичный тому, как работает переполнение стека. в частности, сворачиваемая форма / список комментариев, где пользователь нажимает кнопку добавления комментария к определенному обновлению статуса в списке, а под этим элементом в списке отображается форма ввода комментария вместе с уже опубликованными конкретными комментариями.
Как мне добиться этого с помощью JQuery?
Примечание: ищу также пример разметки другими словами рабочий образец. Спасибо И да, если бы вы могли показать обратную передачу Async, это тоже было бы хорошо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Быстрый подход (просто для отображения / скрытия области комментариев) будет напоминать что-то вроде этого:
$(function(){
$('#id_of_element_to_use_for_click').click(function(){
$('#id_of_comment_area').slideToggle();
});
});
Сайт jQuery предоставит вам документацию по различным подходам, таким как плавные переходы, слайды или другие комбинированные анимации.
Ваша «Область комментариев», которую я использовал в приведенном здесь примере, скорее всего, будет тегом <div>, который содержит ваши существующие комментарии, а также любое текстовое поле или текстовое поле ввода, в которое вы хотите, чтобы пользователи вводили свои ответы.
Вам нужно выполнить асинхронную обратную передачу?
Я предполагаю, что вызов json xhr и обратный вызов для создания фрагмента html также важны
И еще одно - поскольку вы двое так стремитесь проголосовать против единственного опубликованного на данный момент ответа, возможно, вы захотите потратить время на то, чтобы дать правильный? Очень конструктивно, ребята.
-1, redsquare действительно является хорошим аргументом, как этот ответ учитывает необходимость загрузки комментариев? И не стоит обижаться на отрицательные голоса, они за ваш ответ, а не вы.
-1 за дебила. Придурок? Просто потому, что кто-то не знал синтаксиса, который делает его / ее идиотом? Классический пример полного дерьма. Может быть, это могло бы помочь, если бы вы были вежливы и просто сказали человеку, что следует за идиотом.
Это нелепо!! Я единственный, кто до сих пор пытался ответить на этот вопрос, и вместо того, чтобы говорить «вы ответили на него только наполовину», они просто выбирают ленивый вариант и голосуют против того, что я написал. <cntd>
Я не могу поверить, что этот простой вопрос превратился в форум, посвященный грязи и убийствам персонажей. Если вы не думаете, что ответ исчерпывающий, ЗАПОЛНИТЕ ЕГО. Не пытайтесь меня просто преследовать за то, что я не выполнил его. Где, черт возьми, лучшие идеи всех остальных ?!
Возможно, если бы Фил дал немного больше объяснений, то есть дал бы ответ, содержащий некоторую информацию, из которой люди могли бы учиться, а не быстрый фрагмент, который наполовину решает проблему, он привлечет некоторые из тех голосов, которые ему нужны?
Правда, остальное добавлю завтра в обеденный перерыв. Но я не предлагал, чтобы мой ответ по умолчанию был одобрен. Мой аргумент состоит в том, что ответ был не такого плохого качества, чтобы его можно было отвергнуть. Это было только неполное. Почему бы вообще не проголосовать?
@Phil - Я подумал, что вы могли бы расширить свой ответ, вместо того, чтобы утаивать его и дополнять. Если вы этого не сделаете, я с радостью объясню недостающие шаги, чтобы подражать тому, как это делает SO. Не имелось в виду вообще никакого оскорбления, это было просто для того, чтобы побудить вас, возможно, расширить ответ
Чтобы загрузить контент, вы можете просто подключить событие щелчка, чтобы заполнить div с помощью метода загрузки.
Например, в представлении у вас может быть что-то вроде: -
<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>
<div id = "commentContainer" style = "display:none;">
Loading...
</div>
в то время как javascript для подключения всего будет: -
$(function() {
$("#commentLink").click(function() {
$("#commentContainer").toggle();
if ($("#commentContainer").is(":visible")) {
$("#commentContainer").load($(this).attr("href"));
} else {
$("#commentContainer").html("Loading..."); //Or just leave it as is...
}
return false; //Prevent default action
});
});
Вы забыли заключить его в $ (document) .ready (function () {}); (Я этого не сделал - вы, однако)