3

Нужно сделать, чтобы по клику на ссылку появлялся соответствующий div. Вот разметка:

<div class="settings-line">
   <p class="settings-label">Имя</p>

   <a href="#" class="edit-settings">Редактировать</a>
   <div class="sett-drop">
     <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено">
        <div class="form-row">
          <label>Имя</label>
          <input type="text" class="t-inp" name="first_name"/>
          <div class="text-error"</div>
        </div>
      </div>
    </div>

    <div class="settings-line">
      <p class="settings-label">Фамилия</p>

      <a href="#" class="edit-settings">Редактировать</a>
      <div class="sett-drop">
        <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено">
          <div class="form-row">
            <label>Фамилия</label>
            <input type="text" class="t-inp" name="first_name"/>
            <div class="text-error"</div>
          </div>
        </div>
       </div>

Ума хватило только на такой вот код , но в этом случае появляются все инпуты сразу

jQuery(".edit-settings").click(function () {
  if($('.sett-drop').is(":visible")){
            $('.sett-drop').hide("fast");                
  }else {
    $('.sett-drop').show("fast");
  };
});

Как же сделать так , чтобы при клике на ссылку открывался именно тот div, который нужно ? Присваивать id не вариант , так как таких блоков довольно таки много.

2 ответа 2

3

Чуточку поправила код и:

$(".edit-settings").click(function () {
  var
    $this = $(this),
    wrap = $this.closest('.settings-line'),
    drop = wrap.find('.sett-drop');
  
  if(drop.is(":visible")){
    drop.hide("fast");                
  }else {
    drop.show("fast");
  }
});
.sett-drop {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="settings-line">
   <p class="settings-label">Имя</p>
   <a href="#" class="edit-settings">Редактировать</a>
   <div class="sett-drop">
      <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено">
        <div class="form-row">
          <label>Имя</label>
          <input type="text" class="t-inp" name="first_name"/>
          <div class="text-error"></div>
        </div>
      </form>
    </div>
</div>
  
<div class="settings-line">
  <p class="settings-label">Фамилия</p>

  <a href="#" class="edit-settings">Редактировать</a>
  <div class="sett-drop">
    <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено">
      <div class="form-row">
        <label>Фамилия</label>
        <input type="text" class="t-inp" name="first_name"/>
        <div class="text-error"></div>
      </div>
    </form>
  </div>
</div>

P.S: Небольшой алгоритм (мне помогает) --> Берем ссылку на которую кликаем $(this) --> для нее находим обертку в которой она же находится (.settings-line) --> в этой обертке находим контейнер который скрывается\раскрывается и с ним работаем.

2
  • Спасибо тебе большое , добрый ты человек 5 окт 2016 в 7:45
  • : ) нет за что!)
    – SVE
    5 окт 2016 в 7:46
2

$('.edit-settings').click(function(event) {
	event.preventDefault();
    var slidePanel = $(this).next();
    $('.sett-drop').not(slidePanel).slideUp(400, function() {
    	slidePanel.slideDown();
    });
});
.sett-drop {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="settings-line">
    <p class="settings-label">Имя</p>

    <a href="#" class="edit-settings">Редактировать</a>
    <div class="sett-drop">
        <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено">
            <div class="form-row">
                <label>Имя</label>
                <input type="text" class="t-inp" name="first_name" />
                <div class="text-error"></div>
            </div>
        </form>
    </div>
</div>

<div class="settings-line">
    <p class="settings-label">Фамилия</p>
    <a href="#" class="edit-settings">Редактировать</a>
    <div class="sett-drop">
        <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено">
            <div class="form-row">
                <label>Фамилия</label>
                <input type="text" class="t-inp" name="first_name" />
                <div class="text-error"></div>
            </div>
        </form>
    </div>
</div>

5
  • А если второй раз кликнуть? Свернулось\развернулось.
    – SVE
    5 окт 2016 в 7:39
  • Ок, исправил код. 5 окт 2016 в 7:42
  • теперь не закрывается! : \
    – SVE
    5 окт 2016 в 7:43
  • @ElenaSemenchenko а должно? 5 окт 2016 в 7:46
  • Ну обычно делают так, чтобы была возможность и скрыть блок. Но если так, тогда ок)
    – SVE
    5 окт 2016 в 7:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.