http://yapx.ru/v/BTaYd Как сделать данную задачу с помощью jquery ? Или, Какой метод использовать ??
1 ответ
я не гуру jQuery и не знаю как проходить в цикле но в общем если сообщество ruSO поможет доделать т.е сократить код jQuery то будет вообще прилично ...
Примерно делать надо так ...
var elem1 = $("#a");
var elem2 = $("#b");
var elem3 = $("#c");
var elem4 = $("ul");
$("ul li.a").on("click", function(e) {
e.preventDefault();
elem1.slideToggle().addClass("toggle");
elem2.hide();
elem3.hide();
elem4.toggleClass("new");
})
$("ul li.b").on("click", function(e) {
e.preventDefault();
elem1.hide();
elem2.slideToggle().addClass("toggle");
elem3.hide();
elem4.toggleClass("new");
})
$("ul li.c").on("click", function(e) {
e.preventDefault();
elem1.hide();
elem2.hide();
elem3.slideToggle().addClass("toggle");
elem4.toggleClass("new");
})
$(document).on("click", ".toggle", function() {
elem1.hide();
elem2.hide();
elem3.hide();
elem4.removeClass("new");
})
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.wrapper {
width: 100vw;
height: 100vh;
position: relative;
}
.element,
ul {
width: 100vw;
height: 100vh;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
ul li {
border: 3px solid #fbfbfb;
background: #fbfbfb;
width: 10vw;
height: 10vw;
border-radius: 50%;
text-align: center;
line-height: 10vw;
margin-left: 20px;
}
ul li a {
font-size: 22px;
font-variant: small-caps;
display: block;
width: 100%;
height: 100%;
}
ul li:hover {
border: 3px solid red;
background: #ccc;
}
ul li:hover a {
color: #fbfbfb;
}
.hide-elem1,
.hide-elem2,
.hide-elem3 {
width: 90vw;
height: 70vh;
overflow: hidden;
margin: auto;
position: absolute;
bottom: 5vh;
left: 5%;
display: none;
background: #fbfbfb;
padding: 20px;
}
ul.new {
position: absolute;
top: 20px;
width: 50%;
left: 0;
right: 0;
margin: auto;
height: 50px;
opacity: .1;
pointer-events: none;
}
ul.new li {
border-radius: 0;
width: auto;
height: auto;
line-height: 40px;
padding: 0 20px;
}
ul.new li a {
font-size: 22px;
font-variant: small-caps;
height: 50px;
}
.toggle {
animation: ti .3s linear
}
@keyframes ti {
100% {
background: yellow;
opacity: .2;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="element">
<ul>
<li class="a"><a href="#a">item1</a></li>
<li class="b"><a href="#b">item2</a></li>
<li class="c"><a href="#c">item3</a></li>
</ul>
</div>
<div id="a" class="hide-elem1 toggle">
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae reprehenderit ullam itaque ducimus veritatis. Dolorem, sunt aliquid aspernatur vitae expedita facilis modi enim. Quasi fugit eaque vel magnam, quod, in veritatis. Quis aspernatur, praesentium
ipsum eum saepe voluptate repellat iste, cum repellendus ea quam doloribus, et recusandae dolorem sit id.
</div>
<div id="b" class="hide-elem2 toggle">
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae reprehenderit ullam itaque ducimus veritatis. Dolorem, sunt aliquid aspernatur vitae expedita facilis modi enim. Quasi fugit eaque vel magnam, quod, in veritatis. Quis aspernatur, praesentium
ipsum eum saepe voluptate repellat iste, cum repellendus ea quam doloribus, et recusandae dolorem sit id.
</div>
<div id="c" class="hide-elem3 toggle">
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae reprehenderit ullam itaque ducimus veritatis. Dolorem, sunt aliquid aspernatur vitae expedita facilis modi enim. Quasi fugit eaque vel magnam, quod, in veritatis. Quis aspernatur, praesentium
ipsum eum saepe voluptate repellat iste, cum repellendus ea quam doloribus, et recusandae dolorem sit id.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>