Не работает slideToggle. jquery
Здравствуйте. Хочу отодвинуть последующие блоки, когда в первом блоке нажимаю на картинку и выдвигается дополнительный див.
$(document).ready(function() {
$("#trigger-f").click(function(){
$(".descr-f").slideToggle( 'slow', function(){
$("#eight").animate({
top: "280px",
}, 200);
$(".descr-f").css('display', 'flex');
});
});
});
Код работает, но не задвигает дополнительный див назад при клике на туже картинку и отодвигает второй блок накладывая его на третий, а нужно что бы все следующие блоки отодвигались при клике и сдвигались обратно при том же клике. trigger-f - картинка, descr-f - скрытый изначально дополнительный блок, eight -- тот второй блок, за ним еще много следующих блоков. Подскажите как исправить ситуацию? |
Zipper09,
сделайте минимальный макет с html и css |
рони,
<section id="seven"> <div class="col-lg-3 col-sm-6"> <div class="team team-f" id="trigger-f"> <div class="team__img"> <img src="img/workess.png"> </div> <div class="descr descr-f"> <p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="team team-s" id="trigger-s"> <div class="team__img"> <img src="img/workess.png"> </div> <div class="descr descr-s"> <p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="team team-l" id="trigger-l"> <div class="team__img"> <img src="img/workess.png"> </div> <div class="descr descr-l"> <p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="team team-f" id="trigger-f"> <div class="team__img"> <img src="img/workess.png"> </div> <div class="descr descr-f"> <p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p> </div> </div> </div> </section> <section id="eight"> <div class="heading"> <h2>Testimonials</h2> <h6>We understand your requirement and provide quality works</h6> </div> </section> <section id="nine"> <div class="heading"> <h2>Testimonials</h2> <h6>We understand your requirement and provide quality works</h6> </div> </section> <section id="ten"> <div class="heading"> <h2>Testimonials</h2> <h6>We understand your requirement and provide quality works</h6> </div> </section>
#seven {
background-color: #f7f7f7;
max-height: 100%;
padding-bottom: 40px;
}
.team {
text-align: center;
background: white;
box-shadow: 0px 3px 0px 0px #FC5F45;
position:relative;
display: block;
cursor: pointer;
}
.descr{
display: none;
position:absolute;
background:#FFFFFF;
height:auto;
margin-top: 40px;
padding: 50px 80px 20px 60px;
}
#eight{
position: relative;
}
Получается в блоке четыре картинки. у всех у них есть дополнительный див, который открывается только после нажатие на картинку и скрывается опять при нажатие. я хочу что бы все последующие блоки сдвигались вниз как только я нажму на одну из картинок и потом обратно на место становились. |
Цитата:
|
<html>
<head>
<meta charset="utf-8">
<style>
#seven {
background-color: #f7f7f7;
max-height: 100%;
padding-bottom: 40px;
}
.team {
text-align: center;
background: white;
box-shadow: 0px 3px 0px 0px #FC5F45;
position:relative;
display: block;
cursor: pointer;
}
/*Абсолютное позиционирование удалено*/
.descr{
display: none;
background:#FFFFFF;
margin-top: 40px;
padding: 50px 80px 20px 60px;
}
#eight{
position: relative;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#seven').on('click', '.team__img', function() {
$('div.descr').not($(this).next().slideToggle(300)).slideUp(300)
})
});
</script>
</head>
<body>
<section id="seven">
<div class="col-lg-3 col-sm-6">
<div class="team team-f" id="trigger-f">
<div class="team__img">
<img src="http://www.spletnik.ru/img/__post/1f/1f4a0df111e7e504befa1f0a06f5815e_885.gif">
</div>
<div class="descr descr-f">
<p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="team team-s" id="trigger-s">
<div class="team__img">
<img src="http://www.spletnik.ru/img/__post/1f/1f4a0df111e7e504befa1f0a06f5815e_885.gif">
</div>
<div class="descr descr-s">
<p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="team team-l" id="trigger-l">
<div class="team__img">
<img src="http://www.spletnik.ru/img/__post/1f/1f4a0df111e7e504befa1f0a06f5815e_885.gif">
</div>
<div class="descr descr-l">
<p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="team team-f" id="trigger-f">
<div class="team__img">
<img src="http://www.spletnik.ru/img/__post/1f/1f4a0df111e7e504befa1f0a06f5815e_885.gif">
</div>
<div class="descr descr-f">
<p>Monetization first mover advantage iPad. Interaction design buzz handshake. Stealth agile development <br> branding. Backing facebook hackathon conversion startup scrum project niche market business-to-consumer <br>paradigm shift traction. Rockstar bandwidth twitter ownership success disruptive series A financing user<br> experience buyer client social proof validation hypotheses. User experience crowdfunding facebook seed round <br>A/B testing mass market. </p>
</div>
</div>
</div>
</section>
<section id="eight">
<div class="heading">
<h2>Testimonials</h2>
<h6>We understand your requirement and provide quality works</h6>
</div>
</section>
<section id="nine">
<div class="heading">
<h2>Testimonials</h2>
<h6>We understand your requirement and provide quality works</h6>
</div>
</section>
<section id="ten">
<div class="heading">
<h2>Testimonials</h2>
<h6>We understand your requirement and provide quality works</h6>
</div>
</section>
</body>
</html>
|
laimas,
спасибо!! |
| Часовой пояс GMT +3, время: 14:49. |