jefferson jerome Ответов: 1

Закройте один див при открытии других дел (библиотека jQuery нажмите кнопку функция)


Чего я пытаюсь добиться, так это закрыть один DIV, когда открывается другой DIV (нажмите кнопку Открыть) с помощью JQUERY. Я новичок в JAVASCRIPT/JQUERY. Ниже приведена структура HTML.

Мне также интересно узнать, можно ли в этом случае управлять несколькими элементами DOM с помощью одной функции.

Структура HTML









Здесь, нажав на class. region-search и его дочерние элементы, я мог бы заставить выпадающий список region-скользить вниз. Я также мог бы заставить модель регистрации компании нажать кнопку Открыть. Однако, когда первый DIV активен, когда я нажимаю второй DIV, первый остается активным. Мне нужно его закрыть. Как я могу это сделать?. Пожалуйста, помогите мне.

Я также пытаюсь использовать одну и ту же функцию JQUERY для управления обоими DOM. Возможно ли это? Пожалуйста, посоветуйте.

JQUERY выглядит следующим образом

$(документ).готово(функция(){

var $registration_dropdown=$('. company-registration-modal');
ВАР $registration_link=$('.топ-зарегистрировать пролет, .Альфа-регистрацию');

$registration_dropdown.скрыть();
$registration_link. on ('click touchend', функция (событие){

ВАР цель = $(событие.цель);

если(target.is($registration_link)){
$registration_dropdown. slideToggle(300);
событие.это происходит();
}
});

$(document). click (function (e) {
если ($(Эл.цель).ближайший($registration_dropdown).длина== = 0) {
$($registration_dropdown). slideUp (300);
}
});

$registration_dropdown.mouseleave(функция(){
$(этот).задержка (400). скольжение (300);
});

});


Точно так же я пишу другую функцию для второго DIV.

Что я уже пробовал:

$(документ).готово(функция(){

var $registration_dropdown=$('. company-registration-modal');
ВАР $registration_link=$('.топ-зарегистрировать пролет, .Альфа-регистрацию');

$registration_dropdown.скрыть();
$registration_link. on ('click touchend', функция (событие){

ВАР цель = $(событие.цель);

если(target.is($registration_link)){
$registration_dropdown. slideToggle(300);
событие.это происходит();
}
});

$(document). click (function (e) {
если ($(Эл.цель).ближайший($registration_dropdown).длина== = 0) {
$($registration_dropdown). slideUp (300);
}
});

$registration_dropdown.mouseleave(функция(){
$(этот).задержка (400). скольжение (300);
});

});

baotdinh

тоже пост свой HTML

1 Ответов

Рейтинг:
2

santosh-k1

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

<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

JQuery одиночная функция как показано ниже :
$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $div = $("div.dropdown-container", $dropdown);
      $div.toggle();
      $("div.dropdown-container").not($div).hide();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});