当前位置 : 首页 » 互动问答 » 正文

单击按钮后,通过jQuery调整div的大小

分类 : 互动问答 | 发布时间 : 2018-04-27 17:22:49 | 评论 : 4 | 浏览 : 55 | 喜欢 : 0

So I wanted to create a collapse-able side navbar for a webpage. The navbar is working as expected, but how can I get the div with the background image to resize upon clicking the menu icon? After collapsing the navbar, I want the background image to take up 100% width. I added some jQuery to toggle between classes on the element, but the div isn't budging.

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)

  • 1楼
  • 将背景图像添加到占用整个页面宽度的父容器,例如正文。然后添加一个背景大小的封面:

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

     body {
    背景:url(.. image.jpg);
    background-size:cover;
    }
  • 2楼
  • 所需的唯一更改是'main'to'.main'

     $(document).ready(function(){
      $('a')。on('click',function(){
        。$(本)。家长()的兄弟姐妹()儿童()removeClass( '激活')。
        $(本).addClass( '激活');
      });
    
     $('。menu-icon')。on('click',function(){
        $( '导航栏 ')toggleClass(' 捉迷藏导航')。
        $( '主')toggleClass( '扩大-主');
     });
    });
    

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

  • 3楼
  • 1.在js代码中存在拼写错误,

     $('。menu-icon')。on('click',function(){
        $( '导航栏 ')toggleClass(' 捉迷藏导航')。
        $(”主 ')toggleClass(' 扩大-主)。 / *将.main添加到toggleClass * /
        });
    

    2.更正从

     .expand-main {
         / * transform:translateX(-25%);删除这个* /
         宽度:100%;
       }
  • 4楼
  • 在JQ中,使用main . But main是一个类,所以使用.main instead.

    也不要在expand-main上使用translateX。将宽度增加到100%就足够了

    请参阅下面的代码片段

     $(document).ready(function(){
      $('a')。on('click',function(){
        。$(本)。家长()的兄弟姐妹()儿童()removeClass( '激活')。
        $(本).addClass( '激活');
      });
    
      $('。menu-icon')。on('click',function(){
        $( '导航栏 ')toggleClass(' 捉迷藏导航')。
        $(”主 ')toggleClass(' 扩大-主)。
      });
    }); 
     * {
      / * box-sizing:border-box; * /
      填充:0;
      保证金:0;
    }
    
    身体,
    html {
      身高:100%;
      溢出:隐藏;
    }
    
    .main {
      background-image:url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
      宽度:75%;
      身高:100%;
      float:right;
      过渡:.3s;
    }
    
    .nav-bar {
      background-color:#4a235a;
      宽度:25%;
      身高:100%;
      不透明度:0.9;
      过渡:.3s;
    }
    
    ul {
      填充:10%30%;
      保证金率:10%;
    }
    
    ul li {
      白颜色;
      文字转换:大写;
      list-style-type:none;
      填充:20%;
      border-bottom:solid 1px gray;
      font-size:1.2em;
    }
    
    ul li:hover {
      颜色:灰色;
      font-weight:bold;
    }
    
    h3 {
      font-family:Pacifico;
      填充:3%;
      font-size:1.3em;
      颜色:lemonchiffon;
      font-weight:bold;
    }
    
    。空间 {
      位置:相对;
      left:20px;
    }
    
    .active {
      颜色:海军;
      font-weight:bold;
    }
    
    .active:hover {
      颜色:海军;
      font-weight:bold;
    }
    
    h1 {
      font-family:Raleway;
      font-size:2.6em;
      line-height:1.4em;
      填充 - 左侧:20%;
      填充权:20%;
      填充顶部:17%;
      填充底部:4%;
      颜色:雪;
    }
    
    .button {
      白颜色;
      font-size:1.3em;
      text-align:center;
      边框:实心1px白色;
      填充:0.5em 0.7em;
    }
    
    .button:hover {
      颜色:#2c3e50;
      background-color:#c39bd3;
      不透明度:0.9;
      border:solid 1px#c39bd3;
    }
    
    一个 {
      白颜色;
      font-family:Muli;
    }
    
    a:悬停{
      颜色:灰色;
      文字修饰:无;
    }
    
    .menu-icon {
      宽度:2.5%;
      保证金:1.2%;
      填充:0.05%0.02%;
    }
    
    img:hover {
      / * border:solid 1px#17202a;
      border-radius:0.5em; * /
    }
    
    .hide-nav {
      transform:translateX(-100%);
    }
    
    .expand-main {
      宽度:100%;
    }
    
    @media(min-width:1024px)和(max-width:1150px){
      h1 {
        利润率:5%;
        font-size:2.3em;
      }
      .button {
        font-size:1.1em;
      }
    }
    
    @media(min-width:800px)和(max-width:1000px){
      h1 {
        利润率:12%;
        font-size:2em;
      }
      .button {
        font-size:1em;
        保证金率:20%;
      }
      ul li {
        font-size:0.9em;
      }
    }
    
    @media(max-width:800px){
      h1 {
        保证金率:20%;
        font-size:1.8em;
      }
      .button {
        font-size:0.9em;
        保证金率:20%;
      }
      ul li {
        font-size:0.7em;
      }
      h3 {
        font-size:0.8em;
      }
    }
    
    @media(max-width:600px){
      .main {
        宽度:100%;
      }
      .nav-bar {
        显示:无;
      }
      .menu-icon {
        显示:无;
      }
      h1 {
        保证金率: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”>你好!我的名字是<span> Gabby </ span>,我创建了漂亮,专业和响应的网站。</ h1>
      <center> <a class="button text-center" href="#"> <span class =“learn-more”>了解更多</ span> </a> </ center>
    </ DIV>
    
    <div class =“nav-bar”>
      <a href=#> <h3> Gab的技术<br> <span class =“space”>空间</ span> </ h3> </a>
      <ul class =“text-center”>
        <li> <a href=# class="active">主页</a> </ li>
        <li> <a href=#>关于</a> </ li>
        <li> <a href=#>项目</a> </ li>
        <li> <a href=#>联络人</a> </ li>
      </ UL>
    </ DIV>

相关阅读: