Ändern der Größe von div mit jQuery beim Klicken auf eine Schaltfläche

Also wollte ich eine kollabierbare Side-Navbar für eine Webseite erstellen. Die Navigationsleiste funktioniert wie erwartet, aber wie kann ich das div mit dem Hintergrundbild vergrößern, wenn ich auf das Menüsymbol klicke? Nach dem Kollabieren der Navigationsleiste möchte ich, dass das Hintergrundbild 100% Breite einnimmt. Ich habe etwas jQuery hinzugefügt, um zwischen den Klassen des Elements umzuschalten, aber das div rührt sich nicht.Ändern der Größe von div mit jQuery beim Klicken auf eine Schaltfläche

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>

Quelle

2017-10-31 Gabbykun555

Vergessen Sie nicht, dass 'main' eine Klasse hier ist, muss so einen Punkt vor ihm in Ihrem selector: '$ ('. main'). toggleClass ('expand-main');' –

1.There war ein Tippfehler Fehler in der JS-Code,

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

2.After Korrektion, die von

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

Quelle

2017-10-31 15:50:22 frnt

Vielen Dank! Ich wusste nicht einmal, dass es so klein war. Ich denke, es lohnt sich, zuerst den Code zu lesen. – Gabbykun555

Willkommen @ Gabbykun555 :-) Ja, das war eine kleine Korrektur. – frnt

Danke @Sanchit Patiyal für die Ausrichtung meiner Codes, da ich sie in Eile nicht richtig ausgerichtet habe. – frnt

das Hintergrundbild zu einem übergeordneten Container hinzufügen, die die gesamte Breite der Seite einnimmt, den Körper zum Beispiel. Dann eine Hintergrundgröße der Abdeckung hinzu:

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

body { 
background: url(..image.jpg); 
background-size: cover; 
}

Quelle

2017-10-31 15:44:41 Alex

Die benötigte einzige Änderung der Hauptschalter von 'main' zu '.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

Quelle

2017-10-31 15:47:56

In JQ Sie verwenden main transform-Eigenschaft zu entfernen. Aber main ist eine Klasse, also verwenden Sie stattdessen .main.

Verwenden Sie auch nicht translateX auf dem expand-main. Erhöhen sie Breite ist auf 100% es genug

See Schnipsel unten

$(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>

ist

Quelle

2017-10-31 15:50:45

Vielen Dank! Ein einfacher Fehler meinerseits, lol. – Gabbykun555

Ändern der Größe von div mit jQuery beim Klicken auf eine Schaltfläche

Antwort

Verwandte Themen