Hallo,
Ich probiere gerade einen Show more/Show less Button, der funktioniert auch, aber wenn ich den dann mehrmals verwende, dann gehen bei einem klick auf einen Button, alle divs mit diesem toggle auf.
Ich habs mit (this) probiert, aber ich hab das, glaub ich, falsch angewendet. Außerdem habe ich gelesen, dass "this" nicht zu jQuery gehört...mir scheint es wird aber dauernd verwendet?!?
Kann mir bitte jemand sagen, wie ich den einzelnen Button anspreche, ohne dass ich jeden einzelnen toggle anders benennen muss?
Code
<!doctype html>
<html lang="de">
<head>
<title>test</title>
<style>
*{
margin:0;
padding:0;
}
.container{
height:120px;
width:80vw;
border:1px solid lightgrey;
margin:10px auto;
padding:5px 0px;
}
.special-text{
display:none;
}
.expanded{
display:block;
}
.banner_content > p{
text-decoration:underline;
font-size:20px;
text-align:center;
}
.container:before{
content:'X';
position:relative;
display:block;
top:-5px;
left:0px;
width:15px;
height:20px;
font-size:19px;
background:lightgrey;
color:white;
border:1px solid grey;
margin:0;
padding:0;
}
</style>
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="banner_border">
<div class="banner_content">
<p>Überschrift</p>
<div class="banner_content_main">
<div class="special-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<button class="expand-button">
Mehr anzeigen
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="banner_border">
<div class="banner_content">
<p>Ich hasse Menschen,tiere,planzen. Steine sind Ok</p>
<div class="banner_content_main">
<div class="special-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<button class="expand-button">
Mehr anzeigen
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="banner_border">
<div class="banner_content">
<p>ADIDAS = Alle,deutschen idioten denken an sex</p>
<div class="banner_content_main">
<div class="special-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<button class="expand-button">
Mehr anzeigen
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="banner_border">
<div class="banner_content">
<p>PUMA = Papa und Mama auch</p>
<div class="banner_content_main">
<div class="special-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<button class="expand-button">
Mehr anzeigen
</button>
</div>
</div>
</div>
</div>
<script>
// toggle
$(".expand-button").on("click", function(){
$weiter=$(this).parent().children();
$weiter.toggleClass("expanded");
$checken=$weiter.hasClass("expanded");
if($checken==true) {
$(this).html("Schließen");
} else {
$(this).html("Mehr anzeigen");
}
});
/* für toggle uninteresant
hier wird nur gescheckt ob ein after oder before psydo element geklickt wurde */
function psuedoClick(parentElem) {
var beforeClicked,
afterClicked;
var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10),
parentTop = parseInt(parentElem.getBoundingClientRect().top, 10);
//console.log(parentTop+' - '+parentLeft)
var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10),
parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10);
//console.log(parentWidth+' - '+parentHeight)
var before = window.getComputedStyle(parentElem, ':before');
var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)),
beforeEnd = beforeStart + parseInt(before.width, 10);
//console.log(beforeStart+' - '+beforeEnd)
var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)),
beforeYEnd = beforeYStart + parseInt(before.height, 10);
//console.log(beforeYStart+' - '+beforeYEnd)
var after = window.getComputedStyle(parentElem, ':after');
var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)),
afterEnd = afterStart + parseInt(after.width, 10);
var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)),
afterYEnd = afterYStart + parseInt(after.height, 10);
var mouseX = event.clientX,
mouseY = event.clientY;
beforeClicked = (mouseX >= beforeStart && mouseX <= beforeEnd && mouseY >= beforeYStart && mouseY <= beforeYEnd ? true : false);
afterClicked = (mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd ? true : false);
return {
"before" : beforeClicked,
"after" : afterClicked
};
}
$(".container").click(function() {
/*
function rand(){
var zahl = (Math.random() * (255 ));
return zahl;
}
$(this).css('background','rgb('+rand()+','+rand()+','+rand()+')');
*/
if(psuedoClick(this).before==true){
console.log(psuedoClick(this).before+' Before oder after Element geklickt')
$(this).css('display','none');
}
});
</script>
</body>
</html>