1

Всем привет! Задача стоит такая - показывать и скрывать блок по нажатию на кнопку, решил это сделать через js/jquery с помощью fadeIn и fadeOut...оно работает, т.к. по умолчанию блок не отображается(display:none), а при нажатии на кнопку появляться. Суть проблемы в том, что при повторном нажатии скрипт уже перестает срабатывать правильно( блок появляться на пару секунд и закрывается). В чем может быть проблема?

сам код:

$('.btn-down-1').click(function(){
    $("#myShowBlock").fadeIn("slow");
    //$(".btn-up").css("visibility","visible");
    $(".btn-down-1").removeClass().text("Закрыть").addClass('btn-up');

    $('.btn-up').click(function(){

        $("#myShowBlock").fadeOut();
        $(".btn-up").removeClass().text("Показать больше").addClass('btn-down-1');

    });

});

1
  • 1
    "Не правильно работает скрипт js/jQuery" - может Вы неправильно им пользуетесь?
    – user176262
    5 сен 2017 в 16:04

2 ответа 2

3

Вы встали на скользкий путь навешивания обработчиков событий в других обработчиках событий.

"Вы погубите себя, сын мой." Александр Дюма

$(document).on("click", ".btn-down-1", function(){
  $("#myShowBlock").fadeIn("slow");
  $(this).removeClass("btn-down-1").text("Закрыть").addClass("btn-up");
});

$(document).on("click", ".btn-up", function(){
  $("#myShowBlock").fadeOut();
  $(this).removeClass("btn-up").text("Показать больше").addClass("btn-down-1");
});
1
  • Спасибо добрый человек))
    – alexei
    5 сен 2017 в 16:12
1

$(document).on('click', '.btn-up, .btn-down-1', function() {
  const $button = $(this),
    buttonDown = $button.hasClass('btn-down-1');
    
  $(this).toggleClass('btn-up btn-down-1').text(buttonDown ? 'Закрыть' : 'Показать больше');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-down-1">Показать больше</button>

Ваш ответ

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

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