文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >使jQuery切换按预期工作

问使jQuery切换按预期工作
EN

Stack Overflow用户
提问于 2020-06-16 18:18:33
回答 3查看 48关注 0票数 0

我试着在JavaScript旁边做一个菜单。我想用jQuery切换来解决这个问题，但是没有发生。是不是因为这个位置是相对的？

代码语言：javascript
运行
复制
<!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>
javascript
jquery
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-06-16 18:38:04

是的，这与position: relative有关。我会解释这是怎么回事：

您的body从视口的顶部开始，与其最高的子程序所推动的高度一样高，因此它向下延伸以适合其子程序，但不更高。在切换前，#div1是最高的孩子。在切换后，#div1是隐藏的，所以只有<i></i>仍然存在，而body的高度很低。

现在，当元素具有position: relative时，发生的一件事是可以使用top、left、right和bottom将其相对于通常的位置移动。您的<i></i>确实有position: relative，也有bottom: 201px，所以它可以移动到201px。通常情况下，它将在视图的顶部，在body内部。当被移动那么远，它结束在视口之外，所以你不能再看到它了。

您可以使用浏览器的开发工具(例如火狐浏览器的页面检查器或Chrome的DevTools )直观地看到这一切。

票数 1
EN

Stack Overflow用户

发布于 2020-06-16 18:25:26

我在您的css中做了一些更改，但主要是在div之后移动了div。看看这是否是你所需要的。

Demo

​

代码语言：javascript
运行
复制
$(document).ready(function() {
  $("i").click(function() {
    $("#div1").toggle(500)
  })
})
代码语言：javascript
运行
复制
* {
  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);
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2020-06-16 18:39:49

这是您的代码片段，有一些更改：

  • 从CSS中删除position:relative后，定位现在是基于弹性的(带有边距)。
  • 稍微调整了转换，并添加了一些样式，以使按钮移动更流畅(请查看transition属性和--menu_off修饰符类的修复)

​

代码语言：javascript
运行
复制
$(document).ready(function(){
            $(".js-menu-toggle-button").click(function(){
                $(this).toggleClass('menu-container__toggle-button--menu_off');
                $(".js-menu-bar").toggle(500);
            })
        })
代码语言：javascript
运行
复制
*{
            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;
        }
代码语言：javascript
运行
复制
<!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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62415124

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档