Не отображается элемент с id=trigger

109

16 апреля 2022, 13:20

Есть input при нажатии на который должен появится блок и при повторном нажатии скрыться:

<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
                <input type="image" id='trigger' src="../core/css/logotip/logotip.png" class="logotip_icon" title="Меню"/>
            </div>
      
 
 
 


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

$(document).ready(function() {
  $("input#trigger").toggle(
    function() {
      $("DIV#box").fadeOut();// Скрываем блок
      return false;
    },  
    function() {
      $("DIV#box").fadeIn();// Отображаем скрытый блок
      return false;
    }
  );
});

Но что-то происходит и самому input добавляется display:none, где я допустил ошибку?

Answer 1

Но что-то происходит

https://api.jquery.com/toggle/

Происходит то, что Вы самому инпуту делаете toggle.

$("input#trigger").click(function(e) {
  $("DIV#box").toggle(1000);
});

#box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="trigger" value="Click" />
<div id="box"></div>

Answer 2

Попробуйте указатьwidth и height для input в css: