У меня есть переключатель открытия / закрытия, и я пытаюсь скрыть первую кнопку, когда она открыта, а затем снова появляется, когда она закрыта.

Вот что у меня есть:

jQuery.noConflict();

jQuery(document).ready(function() {
  jQuery(".slider").hide('slow');

  jQuery(".clicker, .clicker2").click(function() {
    jQuery(".slider").toggle('slow');
    return false;
  });
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clicker">CLICK HERE</button>
<div class="slider">
  Blah blah blah
  <a class="clicker2" href="#">Close</a>
</div>

Любая помощь могла бы быть полезна. Спасибо.

0
Wizard 25 Ноя 2019 в 14:09
3
Измените jQuery(".slider").toggle('slow') на jQuery(".slider,.clicker").toggle('slow')
 – 
freedomn-m
25 Ноя 2019 в 14:14
Можете ли вы объяснить, с какой именно частью у вас проблемы? У вас есть код для обработки события щелчка, и у вас есть код для переключения видимости, вам больше ничего не нужно.
 – 
freedomn-m
25 Ноя 2019 в 14:17

2 ответа

У вас уже есть код для переключения на основе нажатия, поэтому вы можете добавить кнопку «Открыть» к коду переключения так же, как применить событие click к нескольким элементам:

jQuery(".slider,.clicker").toggle();

Обновленный фрагмент:

jQuery.noConflict();

jQuery(document).ready(function() {
  // hidden in the HTML to remove FOUC: jQuery(".slider").hide('slow');

  jQuery(".clicker, .clicker2").click(function() {
    jQuery(".slider,.clicker").toggle('slow');
    return false;
  });
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clicker">CLICK HERE</button>
<div class="slider" style='display:none;'>
  Blah blah blah
  <a class="clicker2" href="#">Close</a>
</div>
0
freedomn-m 25 Ноя 2019 в 14:29

Вы должны разделить события кликов .clicker и .clicker2. Затем переключите кнопки .slider и .clicker.

Вот демонстрация

$(document).ready(function() {
  jQuery.noConflict();
  jQuery(document).ready(function() {
    jQuery(".slider").hide('slow');

    jQuery(".clicker").click(function() {
      jQuery(".slider").toggle('slow');
      jQuery(this).toggle('slow');
      return false;
    });
    jQuery(".clicker2").click(function() {
      jQuery(".slider, .clicker").toggle('slow');
      return false;
    });
    return false;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clicker">CLICK HERE</button>
<div class="slider">
  Blah blah blah
  <a class="clicker2" href="#">Close</a>
</div>
0
Asfan Shaikh 25 Ноя 2019 в 14:28