Выбор одного пункта, чтобы скользить вниз

Question

Я список задач, тянули из БД MySQL, как показано здесь:

echo '<li>'; 
echo '<span><a id="'.$task_id.'" class="task">'.$task_name.'</a></span>'; 

echo '<input type="checkbox" class="favourite" name="favourite" id="'.$task_id.'" + '.$favouriteChecked.' "> '; 

echo '<img id="'.$task_id.'" class="delete-button" width="10px" src="images/close.svg" />'; 
echo '</li>'; 

echo '<form class="add-additional-info" id="'.$task_id.'+additionalinfo"autocomplete="off">'; 
echo '<input type="text" name="new-info" placeholder="Add extra info" />'; 
echo '</form>'; 

Когда кто-то нажимает на класс = «задачи» Я следующий код, чтобы скатиться новый текстовый блок

function slide_task() { 
      // On tap or hover, have a text box that slides down to enter extra information. 
      var hiddenContent = $(".add-additional-info"); 

      $('.task').click(function() { 
        event.preventDefault(); 
        if (hiddenContent.is(":visible")){ 
         hiddenContent.slideUp(600); 
        } else { 
         hiddenContent.slideDown(600); 
        } 

      }); 

Какие ссылки на следующий CSS

.add-additional-info{ 
    margin-top: 20px; 
    padding-bottom: 60px; 
    display: none; 
} 

.add-additional-info input[type='text'] { 
    width: 100%; 
    font: normal 1.2em 'Raleway', Arial, sans-serif; 
    color: #999; 
    box-shadow: 2px 2px 0px #ddd; 
    border: none; 
    border-radius: none; 
    display: block; 
    padding: 12px 6%; 
    -webkit-appearance: none; 
     -moz-appearance: none; 
      appearance: none; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Что делает код в настоящее время является SlideDown в ext под каждым из классов «задачи». То, что я хочу сделать, - это только то, что оно скользит вниз под «задачей», которая была нажата.

Мне также нужно предоставить информацию, введенную в текстовое поле, в базу данных MySQL - я думаю, что возможность использования уникального идентификатора для каждой задачи (идентификатор?) Решит обе эти проблемы. Возможно, используя «.» $ Task_id. «+ Дополнительная информация»?

Я знаю, что там есть простое решение, но я не то, что должно идти туда.

EDIT: Вымытый код и добавлен уникальный идентификатор для каждой надстройки-Additonal-инфо

Answer 1

Вам нужно применить эффект слайд только к форме, которая следует непосредственно под задачу, которая была щелкнули. Прямо сейчас, вы применяете его ко всем из них. Исходя из вашего HTML, вы можете изменить вашу функцию щелчка, чтобы быть похожим:

function slide_task() { 
     // On tap or hover, have a text box that slides down to enter extra information. 
     $('.task').click(function() { 
       event.preventDefault(); 
       var hiddenContent = $(this).parent().parent().next(); 
       if (hiddenContent.is(":visible")){ 
        hiddenContent.slideUp(600); 
       } else { 
        hiddenContent.slideDown(600); 
       } 

     }); 

The $(this).parent().parent().next() Перемещение из .task звена, размах, к ли, а затем к элементу непосредственно после ли, что ваш .add-additional-info форму. Это решение полностью зависит от вашей структуры HTML, и если это изменится, оно сломается.

Answer 2

Чтобы перейти к следующему .add-additional-info родительскому li из clicced .task, вы должны сделать.

 $('.task').click(function(e) { 
       e.preventDefault(); 
       $(this).closest("li").nextUntil(".add-additional-info").slideToggle(600); 

     }); 

closest() траверса вверх и возвращают первый li, nextUntil() получит следующий .add-additional-info элемент, и slideToggle будут заботиться о скольжении вверх или вниз, независимо от необходимости.