javascript - 单击按钮后使用 jQuery 调整 div 大小

所以我想为网页创建一个可折叠的侧边导航栏。导航栏按预期工作，但如何在单击菜单图标时让带有背景图像的 div 调整大小？折叠导航栏后，我希望背景图像占据 100% 的宽度。我添加了一些 jQuery 来在元素的类之间切换，但 div 没有变化。

The code is also here

$(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

 $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('main').toggleClass('expand-main');
 });
});

* {
  /*box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  overflow: hidden; 
}

.main {
  background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
  width: 75%;
  height: 100%;
  float: right;
  transition: .3s;
}

.nav-bar {
  background-color:   #4a235a;
  width: 25%;
  height: 100%;
  opacity: 0.9;
  transition: .3s;
}

ul {
  padding: 10% 30%;
  margin-top: 10%;
}

ul li {
  color: white;
  text-transform: uppercase;
  list-style-type: none;
  padding: 20%;
  border-bottom: solid 1px gray;
  font-size: 1.2em;
}

ul li:hover {
  color: gray;
  font-weight: bold;
}

h3 {
  font-family: Pacifico;
  padding: 3%;
  font-size: 1.3em;
  color: lemonchiffon;
  font-weight: bold;
}

.space {
  position: relative;
  left: 20px;
}

.active {
  color: navy;
  font-weight: bold;
}

.active:hover {
  color: navy;
  font-weight: bold;
}

h1 {
  font-family: Raleway;
  font-size: 2.6em;
  line-height: 1.4em;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 17%;
  padding-bottom: 4%;
  color: snow;
}

.button {
  color: white;
  font-size: 1.3em;
  text-align: center;
  border: solid 1px white;
  padding: 0.5em 0.7em;
}

.button:hover {
  color: #2c3e50;
  background-color:  #c39bd3;
  opacity: 0.9;
  border: solid 1px #c39bd3;
}

a {
  color: white;
  font-family: Muli;
}

a:hover {
  color: gray;
  text-decoration: none;
}


.menu-icon {
  width: 2.5%;
  margin: 1.2%;
  padding: 0.05% 0.02%;
}

img:hover {
  /*border: solid 1px #17202a;
  border-radius: 0.5em;*/
}

.hide-nav {
  transform: translateX(-100%);
}

.expand-main {
  transform: translateX(-25%);
  width: 100%;
}


@media (min-width: 1024px) and (max-width: 1150px) {
    h1 {
        margin-top: 5%;
        font-size: 2.3em;
    }
    
    .button {
       font-size: 1.1em;
    }
}
@media (min-width: 800px) and (max-width: 1000px) {
  h1 {
    margin-top: 12%;
    font-size: 2em;
  }
  
  .button {
    font-size: 1em;
    margin-top: 20%;
  }
    
  ul li {
    font-size: 0.9em;
  }
}

@media (max-width: 800px) {
  h1 {
    margin-top: 20%;
    font-size: 1.8em;
  }
  
  .button {
    font-size: 0.9em;
    margin-top: 20%;
  }
  
  ul li {
    font-size: 0.7em;
  }
  
  h3 {
    font-size: 0.8em;
  }
}

@media (max-width: 600px) {
  .main {
    width: 100%;
  }
  
  .nav-bar {
    display: none;
  }
  
  .menu-icon {
    display: none;
  }
  
  h1 {
    margin-top: 30%;
  }
}

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Website Template 3 with Navbar</title>

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

  <link rel="stylesheet" href="gabsTechSpace.css">

  <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
      
  <link href="https://fonts.googleapis.com/css?family=Muli" type="text/css" rel="stylesheet">
      
  <link href="https://fonts.googleapis.com/css?family=Pacifico" type="text/css" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div class="main">
  <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
  <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
  <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>

<div class="nav-bar">
    <a href=#><h3>Gab's Tech <br><span class="space">Space</span></h3></a>
  <ul class="text-center">
    <li><a href=# class="active">Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Contact</a></li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  <script  src="gabsTechSpace.js"></script>

</body>
</html>

最佳答案

1.js代码有错字，

    $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('.main').toggleClass('expand-main'); /*Add .main to toggleClass*/
    });

2.更正后从

中删除转换属性

.expand-main {
     /*transform: translateX(-25%); remove this*/
     width: 100%;
   }

关于javascript - 单击按钮后使用 jQuery 调整 div 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47039277/

javascript - 单击按钮后使用 jQuery 调整 div 大小

上一篇：html - 如何在图像下方添加标题(图像用于灯箱)

下一篇：CSS 3 nth of type 仅限于类