代码之家  ›  专栏  ›  技术社区  ›  Gabbykun555

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

  •  0
  • Gabbykun555  · 技术社区  · 8 年前

    所以我想为网页创建一个可折叠的侧导航栏。导航栏按预期工作,但如何在单击菜单图标时使具有背景图像的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>
    4 回复  |  直到 8 年前
        1
  •  0
  •   Sanchit Patiyal    8 年前

    1.js代码中存在打字错误,

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

    2.更正后,从中删除transform属性

    .expand-main {
         /*transform: translateX(-25%); remove this*/
         width: 100%;
       }
    
        2
  •  0
  •   Alex    8 年前

    将背景图像添加到占据页面整个宽度的父容器中,例如正文。然后添加封面的背景尺寸:

    https://codepen.io/alexplummer/pen/LOVzKN

    body {
    background: url(..image.jpg);
    background-size: cover;
    }
    
        3
  •  0
  •   Wouter Bouwman    8 年前

    唯一需要更改的是主选择器 'main' '.main'

    $(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');
     });
    });
    

    https://codepen.io/anon/pen/zPGPGY

        4
  •  0
  •   Mihai T    8 年前

    在您使用的JQ中 main . 但是 主要的 类是否如此使用 .main 相反

    也不要在展开主菜单上使用translateX。将其宽度增加到100%就足够了

    请参阅下面的代码段

    $(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 {
      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%;
      }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>