Управление слайдами с помощью кнопки закрытия — jQuery

#jquery #toggleclass

#jquery #переключающий класс

Вопрос:

Я использую функцию slidetoggle, чтобы открывать и закрывать окно при нажатии на ссылку. Я хочу иметь возможность добавлять кнопку «закрыть» (ссылку) внутри этого окна, а также иметь возможность закрывать его с помощью триггера slidetoggle. Как бы я это сделал?

Это мой jQuery:

 $(".popup-b").hide(); 
$(".popup-l").click(function(){
    $(this).toggleClass("active").next().slideToggle(0);
    return false;
});
  

Мой HTML

 <a class="popup-l" href="#">Areas</a>
<div id="area-p" class="popup-box">
    <div class="close-this"><a href="#">Close</a></div>
    <p>This is the popup box</p>
</div>
  

Ответ №1:

Проверьте эту скрипку, чтобы увидеть, как она работает.

 $(".popup-content").hide(); 
$(".popup-title").click(function(){
    $(this).toggleClass("active").next().slideToggle(0);
    return false;
});
$(".popup-content .close-this").click(function(){
    $(".popup-title", $(this).parents(".popup-box")).click();
    return false;
});
  

Таким образом, active класс будет установлен, когда также используется ссылка закрыть.

У вас также может быть много .popup-box на одной странице.

Ответ №2:

jQuery — jQuery — запрос:

 $(".popup-b").hide(); 
$(".popup-l").click(function(){
    $(this).toggleClass("active").next().slideToggle(0);
    return false;
});
$(".close-popup").click(function() {
  $(this).parent().prev().toggleClass("active").next().slideToggle(0);
);
  

HTML

 <a class="popup-l" href="#">Areas</a>
<div id="area-p" class="popup-box">
    <div class="close-this"><a href="#" class="close-popup">Close</a></div>
    <p>This is the popup box</p>
</div>