Как заставить переключатель jQuery работать должным образом - PullRequest
Новая
       0

Как заставить переключатель jQuery работать должным образом

0 голосов
/ 16 июня 2020

Пробовал сделать меню сбоку от JavaScript. Я хотел решить эту проблему с помощью переключателя jQuery, но этого не произошло. Это потому, что положение относительное? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamburger Menu</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }



        ul{
            margin: 0px;
            padding: 0px;  
        }

        ul li{
            display: block;
        }

        ul li a{
            display: block;
            padding: 15px;
            text-decoration: none;
            color: white;
            letter-spacing: 2px;
            transition: all .25s ease-in-out;
            border-bottom: 1px solid white;
        }

        hr{
            float: left;
            width: 100px;
        }
        div{
            height: 400px;
            width: 150px;
            background-color: red;  
            display: inline-block;
            position: relative;
            right: 226px;
        }
        i{
            margin-left: 200px;
            display: inline-block;
            font-size: 24px;
            position: relative;
            bottom: 201px;
            background-color: white;
            color: red;
            right: 46px;
            transition: all 1s ease ease-in-out;
        }

        ul li a:hover{
            background-color: rgb(0,108,250);
        }
        i:hover{
            color: rgb(0, 108, 250);
        }


    </style>

    <script>
        $(document).ready(function(){
            $("i").click(function(){
                $("#div1").toggle(500)
            })
        })

    </script>


</head>
<body>
    <i class="fas fa-bars"></i>
<div id="div1">
    <ul>
        <li><a href="#" id="ana">Ana Sayfa</a></li>

        <li><a href="#" id="hak">Hakkimizda</a></li>

        <li><a href="#" id="ile">Iletisim</a></li>

        <li><a href="#" id="rek">Reklam</a></li>

        <li><a href="#" id="more">Daha Fazla</a></li>
    </ul>
</div>

</body>
</html>

Ответы [ 3 ]

1 голос
/ 16 июня 2020

Да, это связано с position: relative. Я объясню, что происходит:

Ваш body начинается в верхней части области просмотра и настолько высок, насколько высокий из его дочерних элементов подталкивает его, поэтому он растягивается вниз, чтобы соответствовать своим дочерним элементам, но не более того. Перед переключением #div1 - это старший ребенок. После переключения #div1 скрывается, поэтому остается только <i></i>, а body будет иметь очень низкую высоту.

Теперь, когда элемент имеет position: relative, происходит одно: вы можете использовать на нем top, left, right и bottom, чтобы переместить его относительный туда, где он обычно был бы. В вашем <i></i> есть position: relative, а также bottom: 201px, поэтому он перемещается на 201px. Обычно он находится в верхней части окна просмотра внутри body. Когда он перемещается так далеко, он оказывается за пределами области просмотра, поэтому вы больше не можете его видеть.

Вы можете увидеть все это визуально, используя инструменты разработчика вашего браузера, например Page Inspector для Firefox или Chrome s DevTools .

0 голосов
/ 16 июня 2020

Это ваш фрагмент с некоторыми изменениями:

  • удалено position:relative из CSS, позиционирование теперь гибкое (с полем)
  • немного изменен переход и добавлены несколько стилей для более плавного перемещения кнопок (проверьте исправление для свойства transition и класса модификатора --menu_off) 

$(document).ready(function(){
            $(".js-menu-toggle-button").click(function(){
                $(this).toggleClass('menu-container__toggle-button--menu_off');
                $(".js-menu-bar").toggle(500);
            })
        })
*{
            margin: 0px;
            padding: 0px;
        }



        ul{
            margin: 0px;
            padding: 0px;  
        }

        ul li{
            display: block;
        }

        ul li a{
            display: block;
            padding: 15px;
            text-decoration: none;
            color: white;
            letter-spacing: 2px;
            transition: all .25s ease-in-out;
            border-bottom: 1px solid white;
        }

        hr{
            float: left;
            width: 100px;
        }

        ul li a:hover{
            background-color: rgb(0,108,250);
        }
        i:hover{
            color: rgb(0, 108, 250);
        }

        .menu-container {
          display: flex;
        }

        .menu-container__menu-bar {
            height: 400px;
            width: 150px;
            background-color: red;  
            display: inline-block;
        }

        .menu-container__toggle-button {
            margin-left: 2rem;
            font-size: 24px;
            background-color: white;
            color: red;
            transition: all 0.5s ease-in-out;
        }

        .menu-container__toggle-button--menu_off {
            margin-left: 0;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamburger Menu</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="menu-container">
    <div class="menu-container__menu-bar js-menu-bar">
        <ul>
            <li><a href="#" id="ana">Ana Sayfa</a></li>

            <li><a href="#" id="hak">Hakkimizda</a></li>

            <li><a href="#" id="ile">Iletisim</a></li>

            <li><a href="#" id="rek">Reklam</a></li>

            <li><a href="#" id="more">Daha Fazla</a></li>
        </ul>
    </div>
    <i class="fas fa-bars menu-container__toggle-button js-menu-toggle-button"></i>
  </div>

</body>
</html>
0 голосов
/ 16 июня 2020

Я немного изменил ваш css, но в основном я переместил i после div. Проверьте это и убедитесь, что это то, что вам нужно.

Демо 

$(document).ready(function() {
  $("i").click(function() {
    $("#div1").toggle(500)
  })
})
* {
  margin: 0px;
  padding: 0px;
}

ul {
  margin: 0px;
  padding: 0px;
}

ul li {
  display: block;
}

ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: white;
  letter-spacing: 2px;
  transition: all .25s ease-in-out;
  border-bottom: 1px solid white;
}

hr {
  float: left;
  width: 100px;
}

div {
  height: 400px;
  width: 150px;
  background-color: red;
  display: inline-block;
  position: relative;
  float:left;
}

i {
  top: 0px;
  display: inline-block;
  font-size: 24px;
  position: relative;
  margin-left:5px;
  background-color: white;
  color: red;
  transition: all 1s ease ease-in-out;
}

ul li a:hover {
  background-color: rgb(0, 108, 250);
}

i:hover {
  color: rgb(0, 108, 250);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>




<div id="div1">
  <ul>
    <li><a href="#" id="ana">Ana Sayfa</a></li>

    <li><a href="#" id="hak">Hakkimizda</a></li>

    <li><a href="#" id="ile">Iletisim</a></li>

    <li><a href="#" id="rek">Reklam</a></li>

    <li><a href="#" id="more">Daha Fazla</a></li>
  </ul>
</div>
<i class="fas fa-bars"></i>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...