Javascript 使jQuery切换按预期工作_Javascript_Jquery

Javascript 使jQuery切换按预期工作

javascript jquery

Javascript 使jQuery切换按预期工作,javascript,jquery,Javascript,Jquery,我试着在JavaScript一侧制作一个菜单。我想用jquerytoggle处理这个问题，但没有发生。是因为位置是相对的吗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

我试着在JavaScript一侧制作一个菜单。我想用jquerytoggle处理这个问题，但没有发生。是因为位置是相对的吗

<!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>


汉堡包菜单
*{
边际：0px；
填充：0px；
}
保险商实验室{
边际：0px；
填充：0px；
}
ulli{
显示：块；
}
ullia{
显示：块；
填充：15px；
文字装饰：无；
颜色：白色；
字母间距：2px；
过渡：所有.25秒轻松进出；
边框底部：1px纯白；
}
人力资源{
浮动：左；
宽度：100px；
}
div{
高度：400px；
宽度：150px；
背景色：红色；
显示：内联块；
位置：相对位置；
右：226px；
}
我{
左边距：200px；
显示：内联块；
字体大小：24px；
位置：相对位置；
底部：201px；
背景色：白色；
颜色：红色；
右：46px；
过渡：所有1都易于输入和输出；
}
悬停{
背景色：rgb（0108250）；
}
i:悬停{
颜色：rgb（0、108、250）；
}
$（文档）.ready（函数（）{
$（“i”）。单击（函数（）{
$（“#div1”）。切换（500）
})
})

我在您的css中做了一些更改，但主要是将

移到

div

之后。看看这是不是你需要的

演示

$（文档）.ready（函数（）{
$（“i”）。单击（函数（）{
$（“#div1”）。切换（500）
})
})

*{
边际：0px；
填充：0px；
}
保险商实验室{
边际：0px；
填充：0px；
}
ulli{
显示：块；
}
ullia{
显示：块；
填充：15px；
文字装饰：无；
颜色：白色；
字母间距：2px；
过渡：所有.25秒轻松进出；
边框底部：1px纯白；
}
人力资源{
浮动：左；
宽度：100px；
}
div{
高度：400px；
宽度：150px；
背景色：红色；
显示：内联块；
位置：相对位置；
浮动：左；
}
我{
顶部：0px；
显示：内联块；
字体大小：24px；
位置：相对位置；
左边距：5px；
背景色：白色；
颜色：红色；
过渡：所有1都易于输入和输出；
}
悬停{
背景色：rgb（0、108、250）；
}
i:悬停{
颜色：rgb（0、108、250）；
}

是的，它与位置：相对有关。我将解释发生了什么：

您的

主体

从视口顶部开始，其高度与其子对象的最高位置相同，因此它向下延伸以适合其子对象，但不会更高。在切换之前，

#div1

是最高的子级。切换后，

#div1

被隐藏，因此只剩下

，而

主体将具有非常低的高度
现在，当一个元素有位置：relative
时，发生的一件事是，您可以使用顶部
、左侧
、右侧
和底部
将其相对于正常位置移动。您的
确实有位置：relative
，并且它还有底部：201px
，因此它会向上移动201px。通常，它将位于视口的顶部，在主体内部。当向上移动到如此远的位置时，它最终会出现在视口之外，因此您无法再看到它
您可以使用浏览器的开发工具（例如Firefox或Chrome）直观地看到所有这些内容。
这是您的代码片段，其中有一些更改：

从CSS中删除了position:relative
，定位现在基于flex（带边距）
稍微调整了过渡并添加了一些样式以使按钮移动更平滑（查看过渡
属性和--菜单关闭
修改器类的修复）


$（文档）.ready（函数（）{
$（“.js菜单切换按钮”）。单击（函数（）{
$（this.toggleClass（'menu-container\uuuutoggle-button--menu\uoff'）；
$（“.js菜单栏”）。切换（500）；
})
})
*{
边际：0px；
填充：0px；
}
保险商实验室{
边际：0px；
填充：0px；
}
ulli{
显示：块；
}
ullia{
显示：块；
填充：15px；
文字装饰：无；
颜色：白色；
字母间距：2px；
过渡：所有.25秒轻松进出；
边框底部：1px纯白；
}
人力资源{
浮动：左；
宽度：100px；
}
悬停{
背景色：rgb（0108250）；
}
i:悬停{
颜色：rgb（0、108、250）；
}
.菜单容器{
显示器：flex；
}
.menu-container\菜单栏{
高度：400px；
宽度：150px；
背景色：红色；
显示：内联块；
}
.menu-container\切换按钮{
左边距：2em；
字体大小：24px；
背景色：白色；
颜色：红色；
过渡：所有0.5s缓进缓出；
}
.menu-container\uuu切换按钮--menu\u关闭{
左边距：0；
}

汉堡包菜单