Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2018, 11:27
Новичок на форуме
Отправить личное сообщение для Zipper09 Посмотреть профиль Найти все сообщения от Zipper09
 
Регистрация: 14.03.2018
Сообщений: 3

Не работает 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 -- тот второй блок, за ним еще много следующих блоков. Подскажите как исправить ситуацию?
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2018, 12:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Zipper09,
сделайте минимальный макет с html и css
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2018, 14:38
Новичок на форуме
Отправить личное сообщение для Zipper09 Посмотреть профиль Найти все сообщения от Zipper09
 
Регистрация: 14.03.2018
Сообщений: 3

рони,
<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;
}


Получается в блоке четыре картинки. у всех у них есть дополнительный див, который открывается только после нажатие на картинку и скрывается опять при нажатие. я хочу что бы все последующие блоки сдвигались вниз как только я нажму на одну из картинок и потом обратно на место становились.
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2018, 16:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Zipper09
Подскажите как исправить ситуацию?
не знаю, может кто-то другой подскажет ...
Ответить с цитированием
  #5 (permalink)  
Старый 19.03.2018, 19:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<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, 20.03.2018 в 12:07.
Ответить с цитированием
  #6 (permalink)  
Старый 19.03.2018, 21:00
Новичок на форуме
Отправить личное сообщение для Zipper09 Посмотреть профиль Найти все сообщения от Zipper09
 
Регистрация: 14.03.2018
Сообщений: 3

laimas,
спасибо!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Jquery Ajax не работает через определенных провайдеров Fairy-Wilbury AJAX и COMET 0 10.07.2014 16:33
Jquery функционал не работает в Internet Explorer allross92 Ваши сайты и скрипты 5 03.06.2014 14:32
jQuery Click() не работает на объекте, созданном Ajax vovabigov jQuery 13 09.09.2012 14:25
jQuery scrollTop не работает в хроме и в сафари dadli jQuery 2 12.05.2012 14:54
jQuery не работает ни в IE8 ни в Firefox Jon Events/DOM/Window 7 09.01.2010 23:39