有没有更好的方法来执行此jQuery代码？

时间：2019-04-10 03:27:59

标签： jquery html5 css3

我当前正在为移动设备创建一个导航栏，该导航栏在按下按钮时会展开。它会为内容扩展一定数量的像素。当关闭按钮出现时，它应该关闭回到原来的尺寸。它的大小适当，但不会减小。这是我的代码的基本版本。

我曾经尝试创建变量和其他东西的负载，但我实在不记得自己到底做了什么。

我的HTML：

<div class="navbar-background">
    </div>
    <div class="mobile-navbar-button">
      <div class="bar-1">
      </div>
      <div class="bar-2">
      </div>
      <p class="closebtn">&times;</p>
    </div>

我的CSS：

.mobile-navbar-button {
  background-color: blue;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: fixed;
  left: 2vw;
  top: 30px;
  transition: 0.5s;
  z-index: 0;
}

.navbar-background {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.closebtn {
  color: white;
  font-size: 100px;
  position: fixed;
  top: -80px;
  left: 35px;
  display: none;
  transition: 0.8s;
}
.bar-1 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 65px;
  left: 37px;
}
.bar-2 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 85px;
  left: 37px;
}

我的jQuery：

$(document).ready(function() {
  $(".mobile-navbar-button").on('touchstart', function() {
    $('.mobile-navbar-button').css('width', '1425px');
    $('.mobile-navbar-button').css('height', '1200px');
    $('.mobile-navbar-button').css('left', '-400px');
    $('.mobile-navbar-button').css('top', '-400px');
    $('.mobile-navbar-button').find('.bar-1').css('display', 'none');
    $('.mobile-navbar-button').find('.bar-2').css('display', 'none');
    $('.closebtn').css('display', 'block');
  });
  $(".closebtn").on('touchstart', function() {
    $('.mobile-navbar-button').css('width', '90px');
    $('.mobile-navbar-button').css('height', '90px');
    $('.mobile-navbar-button').css('left', '2vw');
    $('.mobile-navbar-button').css('top', '30px');
    $('.mobile-navbar-button').find('.bar-1').css('display', 'block');
    $('.mobile-navbar-button').find('.bar-2').css('display', 'block');
  });
});

我希望.mobile-navbar-button的宽度和高度能反射回90px的宽度和高度。但是目前还没有发生。宽度和高度在1425px的宽度和1200px的高度上“固定”，不会回到我在.closebtn函数中设置的值。

4 个答案:

答案 0 :(得分：1)

这是一个稍微简单的代码：

$(document).ready(function() {
  $(".mobile-navbar-button").on('click touchstart', function() {
    $('.mobile-navbar-button').css({
      "width": 1425 + "px",
      "height": 1200 + "px",
      "left": -400 + "px",
      "top": -400 + "px",
    });

    $('.mobile-navbar-button').find('.bar-1, .bar-2').css('display', 'none');

    $('.closebtn').css('display', 'block');
  });

  $(".closebtn").on('click touchstart', function() {
    $('.mobile-navbar-button').css({
      "width": 90 + "px",
      "height": 90 + "px",
      "left": 2 + "vw",
      "top": 30 + "px",
    });

    $('.mobile-navbar-button').find('.bar-1, .bar-2').css('display', 'block');
    $('.closebtn').css('display', 'none');
  });
});
.mobile-navbar-button {
  background-color: blue;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: fixed;
  left: 2vw;
  top: 30px;
  transition: 0.5s;
  z-index: 0;
  cursor: pointer;
}

.navbar-background {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.closebtn {
  color: white;
  font-size: 100px;
  position: fixed;
  top: -80px;
  left: 35px;
  display: none;
  transition: 0.8s;
  cursor: pointer;
}

.bar-1 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 65px;
  left: 37px;
}

.bar-2 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 85px;
  left: 37px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="navbar-background"></div>
<div class="mobile-navbar-button">
  <div class="bar-1">
  </div>
  <div class="bar-2">
  </div>
</div>
<p class="closebtn">&times;</p>

必须从 .mobile-navbar-button 元素中删除 closebtn ，并使其click / { {1}}功能必须进行修改（最后一行添加了CSS 隐藏显示）。

它与touchstart和click事件一起使用，并为jQuery CSS使用touchstart语法。

在jQuery CSS中将单位与数字分开通常是一个好主意，因为这样可以将它用作数字而不是字符串（ 1425 是 int ，但 1425px 是字符串）。

答案 1 :(得分：0)

这是解决方案！

$(document).ready(function () {

    // Proper way of using multile CSS
    $('#div').css({
        'width': '500px',
        'height': '500px',
        'background': '#eee',
        'border-top-left-radius': '40px',
        'display': 'none'
    });


    $('#close').css({
        'display': 'none'
    });


    $('#open').click(function () {
        $('#div').css({
            'display': 'block'
        });
        $('#close').css({
            'display': 'block'
        });
        $(this).css({
            'display': 'none'
        });
    });


    $('#close').click(function () {
        $('#div').css({
            'display': 'none'
        });
        $('#open').css({
            'display': 'block'
        });
        $(this).css({
            'display': 'none'
        });
    });
});
button {
    background-color: blue;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: fixed;
    left: 2vw;
    top: 5px;
    transition: all 1s ease;
    z-index: 0;
    cursor: pointer;
    color: #fff;
    font-size: 30px;
    border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
  <button id="open"><i class="fas fa-bars"></i></button>
  <button id="close"><i class="fas fa-times"></i></button>
  <div id="div"></div>
</body>
</html>

我还展示了使用多个CSS的正确方法。希望对您有所帮助。

答案 2 :(得分：0)

我得到了上班族的支持！一些额外的编码工作可能不是100％实际的，但是它可以按照我想要的方式工作！谢谢大家的贡献！如果您想看看我做了什么，我会将其发布在此答案中。

我的HTML：

<div class="navbar-fullscreen-background">
    </div>
    <div class="mobile-navbar-button">
      <div class="bar-1">
      </div>
      <div class="bar-2">
      </div>
    </div>
    <div class="navbar-background">
      <p class="closebtn">&times;</p>
    </div>

我在mobile-navbar-button后面添加了navbar-background类，以便用户无法看到它。

我的CSS：

.mobile-navbar-button {
  background-color: blue;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: fixed;
  left: 2vw;
  top: 30px;
  transition: 0.5s;
  z-index: 3;
}

.navbar-background {
  background-color: blue;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: fixed;
  left: 2vw;
  top: 30px;
  transition: 0.5s;
  z-index: 2;
}

.navbar-fullscreen-background {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: 0.5s;
  display: none;
}

.closebtn {
  color: white;
  font-size: 100px;
  position: fixed;
  top: -80px;
  left: 35px;
  display: none;
  transition: 0.8s;
}

.bar-1 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 65px;
  left: 37px;
}
.bar-2 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 85px;
  left: 37px;
}

然后我将navbar-background添加到CSS中，然后为mobile-navbar-button，navbar-fullscreen-background和navbar-background赋予z-index以修改其堆栈。

我的jQuery：

$(document).ready(function() {
  $(".mobile-navbar-button").on('touchstart', function() {
    $('.navbar-background').css({'width': 1450 + 'px', 'height': 1200 + 'px', 'left': -400 + 'px', 'top': -400 + 'px',});
      $('.navbar-fullscreen-background').css('display', 'block');
        $('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'none');
          $('.closebtn').css('display', 'block');
  });
  $(".closebtn").on('touchstart', function() {
    $('.navbar-background').css({'width': 90 + 'px', 'height': 90 + 'px', 'left': 2 + 'vw', 'top': 30 + 'px',});
      $('.mobile-navbar-button, .bar-1, .bar-2').css('display', 'block');
        $('.navbar-fullscreen-background').css('display', 'none');
          $('.closebtn').css('display', 'none');
  });
});

我最终使用了jQuery（修正版）并修复了它以正确地对应我的HTML和CSS更改，并且能够使.mobile-navbar-button，.bar-1和bar-2不显示，因此将使用导航栏背景作为内容的增长和收缩区域。

不能100％确定这是否是最好的方法，但这对我有用！

答案 3 :(得分：0)

为什么没有人想到只是在导航按钮中添加和删除类来发出状态信号呢！如果您决定要更改所应用的样式，那么从JS / jQuery操纵样式属性是可怕的。只需使用一些额外的CSS规则并在导航栏上切换一个类。更简单，更容易维护

只需在导航栏上切换open类，额外的CSS即可处理显示内容。

我添加了click事件处理程序，以使在没有触摸屏的设备上更易于使用；）

$(document).ready(function() {
  var navButton = $(".mobile-navbar-button");
  var closeButton = $(".closebtn");

  navButton.on('click', function() {
          navButton.toggleClass('open')
      });

  closeButton.on('touchstart', function() {
          navButton.toggleClass('open');
      });

});
.mobile-navbar-button {
  background-color: blue;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: fixed;
  left: 2vw;
  top: 30px;
  transition: 0.5s;
  z-index: 0;
}

.navbar-background {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.closebtn {
  color: white;
  font-size: 100px;
  position: fixed;
  top: -80px;
  left: 35px;
  display: none;
  transition: 0.8s;
}

.bar-1 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 65px;
  left: 37px;
}

.bar-2 {
  background-color: white;
  width: 54px;
  height: 3px;
  position: fixed;
  top: 85px;
  left: 37px;
}

/* Change display when 'open' class is active on .mobile-navbar-button */
.mobile-navbar-button.open {
  height: 1200px;
  left: -400px;
  top: -400px;
}

.mobile-navbar-button.open .bar-1,
.mobile-navbar-button.open .bar-2 {
  display: none;
}

.mobile-navbar-button.open .closebtn {
  display: block;
  top: 30px;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mobile-navbar-button">
  <div class="bar-1">
  </div>
  <div class="bar-2">
  </div>
  <p class="closebtn">&times;</p>
</div>

EDIT 删除了“ touchstart”事件处理程序

相关问题
最新问题