我有this代码。我想知道如何创建一个可以替代这四个相同的.onclick()方法的函数。我找到了答案(this和this),但仍然没有结果。谢谢!
$(".info-1").on("click", function() {
$("#service-2").css("visibility", "hidden");
$("#service-4").css("visibility", "hidden");
$(".info-4").closest(".service").children(".service-detail-info").fadeOut(500);
$(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
$("#service-2").css("visibility", "visible");
$("#service-4").css("visibility", "visible");
});
});
$(".info-2").on("click", function() {
$("#service-1").css("visibility", "hidden");
$("#service-3").css("visibility", "hidden");
$(".info-4").closest(".service").children(".service-detail-info").fadeOut(500);
$(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
$("#service-1").css("visibility", "visible");
$("#service-3").css("visibility", "visible");
});
});
$(".info-3").on("click", function() {
$("#service-4").css("visibility", "hidden");
$("#service-2").css("visibility", "hidden");
$(".info-1").closest(".service").children(".service-detail-info").fadeOut(500);
$(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
$("#service-2").css("visibility", "visible");
$("#service-4").css("visibility", "visible");
});
});
$(".info-4").on("click", function() {
$("#service-1").css("visibility", "hidden");
$("#service-3").css("visibility", "hidden");
$(".info-2").closest(".service").children(".service-detail-info").fadeOut(500);
$(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
$("#service-1").css("visibility", "visible");
$("#service-3").css("visibility", "visible");
});
});

.services-border {
width: 100%;
height: 540px;
}
/* line 40, ../scss/_content.scss */
.services-border > .services {
width: 1240px;
height: 270px;
left: 50%;
position: absolute;
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* line 46, ../scss/_content.scss */
.services-border > .services > .right {
float: right;
}
/* line 48, ../scss/_content.scss */
.services-border > .services > .right > .service-info {
right: 0;
}
/* line 51, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info {
left: 0;
}
/* line 53, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info > .border {
float: right;
margin-right: 10px;
}
/* line 59, ../scss/_content.scss */
.services-border > .services > .left {
float: left;
}
/* line 61, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info {
right: 0;
}
/* line 63, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info > .border {
float: left;
margin-left: 10px;
}
/* line 69, ../scss/_content.scss */
.services-border > .services > .service {
width: 620px;
height: 270px;
}
/* line 72, ../scss/_content.scss */
.services-border > .services > .service > .service-info {
position: absolute;
z-index: 1;
margin-top: 30px;
}
/* line 76, ../scss/_content.scss */
.services-border > .services > .service > .service-info > img {
float: left;
}
/* line 79, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text {
float: left;
width: 480px;
margin-left: 30px;
color: #3f4147;
font-size: 11pt;
font-family: "GothamProReg";
}
/* line 86, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > span {
display: inline-block;
}
/* line 89, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > h4 {
width: 400px;
font-size: 14pt;
font-family: "GothamProBold";
text-transform: uppercase;
margin-bottom: 15px;
line-height: 20px;
}
/* line 97, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > ul {
list-style-type: circle;
color: #a70c5d;
margin-left: 15px;
}
/* line 102, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > [class^="info"] {
width: 30px;
height: 30px;
border-radius: 30px;
border: 2px solid #a70c5d;
float: right;
text-align: center;
font-family: "BanderaProBold";
vertical-align: bottom;
line-height: 25px;
font-size: 16pt;
background: #fff;
}
/* line 114, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > [class^="info"]:hover {
background: #a70c5d;
color: #fff;
cursor: pointer;
}
/* line 120, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > ul > li > span {
color: #3f4147;
}
/* line 123, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > *:not(h4) {
line-height: 25px;
}
/* line 128, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info {
width: 630px;
height: 540px;
top: 0;
position: absolute;
z-index: 10;
display: none;
background: #fff;
}
/* line 136, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text {
margin-top: 45px;
}
/* line 138, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > span {
width: 60px;
font-family: "GothamProBlack";
font-size: 10pt;
float: left;
height: auto;
margin-top: 25px;
text-transform: uppercase;
}
/* line 147, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text {
width: 490px;
margin-left: 30px;
float: left;
}
/* line 151, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text > h4 {
font-family: "GothamProBold";
font-size: 14pt;
text-transform: uppercase;
line-height: 20px;
}
/* line 157, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text > p {
font-family: "GothamProReg";
font-size: 13pt;
margin-top: 20px;
line-height: 20pt;
}
/* line 164, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price {
width: 480px;
float: left;
margin-left: 30px;
margin-top: 25px;
}
/* line 169, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul {
width: 480px;
float: left;
}
/* line 172, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(1) {
font-size: 13pt;
font-family: "GothamProBold";
}
/* line 176, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(2) {
margin-top: 5px;
font-size: 11pt;
font-family: "GothamProReg";
}
/* line 181, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(3) {
margin-top: 20px;
font-family: "GothamProReg";
font-size: 11pt;
}
/* line 185, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(3) .large {
font-size: 16pt;
}
/* line 189, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul > li {
float: left;
width: 150px;
}
/* line 194, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > button {
margin-top: 30px;
}
/* line 199, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border {
height: 200px;
width: 0;
position: relative;
margin-top: 20px;
}
/* line 204, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:after, .services-border > .services > .service > .service-detail-info > .border:before {
top: 40px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
/* line 213, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:after {
border-width: 6px;
margin-top: -6px;
}
/* line 217, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:before {
border-width: 7px;
margin-top: -7px;
}
/* line 222, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right {
border-right: 1px solid #a70c5d;
}
/* line 224, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:after, .services-border > .services > .service > .service-detail-info > .border-right:before {
left: 100%;
}
/* line 227, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:after {
border-left-color: #fff;
}
/* line 230, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:before {
border-left-color: #a70c5d;
}
/* line 234, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left {
border-left: 1px solid #a70c5d;
}
/* line 236, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:after, .services-border > .services > .service > .service-detail-info > .border-left:before {
right: 100%;
}
/* line 239, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:after {
border-right-color: #fff;
}
/* line 242, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:before {
border-right-color: #a70c5d;
}
/* line 248, ../scss/_content.scss */
.services-border > .services > .service > .second-row > .border {
margin-top: 290px;
}
/* line 252, ../scss/_content.scss */
.services-border > .services > .service:hover {
cursor: default;
}
/* line 254, ../scss/_content.scss */
.services-border > .services > .service:hover #docs {
background: url("../img/sprite.png") -40px 0;
}
/* line 257, ../scss/_content.scss */
.services-border > .services > .service:hover #notebook {
background: url("../img/sprite.png") -40px -41px;
}
/* line 260, ../scss/_content.scss */
.services-border > .services > .service:hover #target {
background: url("../img/sprite.png") -42px -80px;
}
/* line 263, ../scss/_content.scss */
.services-border > .services > .service:hover #court {
background: url("../img/sprite.png") -42px -122px;
}
/* line 266, ../scss/_content.scss */
.services-border > .services > .service:hover:last-child {
right: 0;
}
/* line 272, ../scss/_content.scss */
.services-border #docs {
width: 40px;
height: 41px;
background: url("../img/sprite.png") 0 0;
}
/* line 277, ../scss/_content.scss */
.services-border #notebook {
width: 40px;
height: 39px;
background: url("../img/sprite.png") 0 -41px;
}
/* line 282, ../scss/_content.scss */
.services-border #target {
width: 42px;
height: 42px;
background: url("../img/sprite.png") 0 -80px;
}
/* line 287, ../scss/_content.scss */
.services-border #court {
width: 42px;
height: 42px;
background: url("../img/sprite.png") 0 -122px;
}

<section class="services-border">
<div class="services">
<div id="service-1" class="service left">
<div class="service-info">
<img id="docs" src="assets/img/transparent.png">
<div class="service-info-text">
<button class="info-1 btn">
<span>i</span>
</button>
<h4>Наведение порядка<br> в делах</h4>
<span>Аудит документов и платежей на предмет:</span>
<ul>
<li><span>соблюдения необходимых формальностей ипроцедур,</span></li>
<li><span>наличия всех оригиналов договоров, актов,</span></li>
<li><span>легализация зависших платежей.</span></li>
</ul>
</div>
</div>
<div class="service-detail-info">
<div class="border border-left"></div>
</div>
</div>
<div id="service-2" class="service right">
<div class="service-info">
<img id="notebook" src="assets/img/transparent.png">
<div class="service-info-text">
<button class="info-2 btn">
<span>i</span>
</button>
<h4>Оптимизация<br> договорных отношений </h4>
<ul>
<li><span>Доработка, латание дыр и улучшение условий основных типовых договоров вашей компании</span></li>
<li><span>Оформление сотрудников на оптимальных условиях ведения деятельности и налогообложения</span></li>
<li><span>Составление договоров, соглашений о конфиденциальности, публичных офферт</span></li>
</ul>
</div>
</div>
<div class="service-detail-info">
<div class="border border-right"></div>
<div class="service-detail-info-text">
<span>Услуга</span>
<div class="service-text">
<h4>Оптимизация<br>
договорных отношений</h4>
<p>Борьба внутри меня, и я был в самых разных
ситуациях в моей жизни. <span class="bold">Таким образом, борьба, что
у меня на постоянной основе, это просто пробовать
и быть лучше.</span></p>
<p>Есть определенная разница между публичным человеком и обычным человеком,
это как сойти с ума - для меня во всяком случае - открыть себя целиком
для всего мира. </p>
</div>
<span>Цена</span>
<div class="service-price">
<ul>
<li>< 50</li>
<li>50-100</li>
<li>> 100</li>
</ul>
<ul>
<li>Сотрудников</li>
<li>Сотрудников</li>
<li>Сотрудников</li>
</ul>
<ul>
<li>от <span class="bold"><span class="large">5000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">15000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">25000</span> грн.</span></li>
</ul>
<button class="btn btn-small">
<span>Заказать</span>
</button>
</div>
</div>
</div>
</div>
<div id="service-3" class="service left">
<div class="service-info">
<img id="target" src="assets/img/transparent.png">
<div class="service-info-text">
<button class="info-3 btn">
<span>i</span>
</button>
<h4>Правовое сопровождение<br> деятельности (юрист-аутсорсер)</h4>
<ul>
<li><span>Участие в заключении договоров: минимизация рисков, усиление ваших позиций</span></li>
<li><span>Юридическая консультация</span></li>
<li><span>Дайджест предпринимательских ИТ-новостей с разъяснениями</span></li>
<li><span>Представительство интересов в судах</span></li>
</ul>
</div>
</div>
<div class="service-detail-info second-row">
<div class="border border-left"></div>
</div>
</div>
<div id="service-4" class="service right">
<div class="service-info">
<img id="court" src="assets/img/transparent.png">
<div class="service-info-text">
<button class="info-4 btn">
<span>i</span>
</button>
<h4>Разработка договоров<br> и другой документации</h4>
<p>К сожалению, конфликты бывают в любой сфере. Если дело близится к суду или уже дошло до него,
мы поможем отстоять ваши права и интересы.</p>
</div>
</div>
<div class="service-detail-info second-row">
<div class="border border-right"></div>
<div class="service-detail-info-text">
<span>Услуга</span>
<div class="service-text">
<h4>Оптимизация<br>
договорных отношений</h4>
<p>Борьба внутри меня, и я был в самых разных
ситуациях в моей жизни. <span class="bold">Таким образом, борьба, что
у меня на постоянной основе, это просто пробовать
и быть лучше.</span></p>
<p>Есть определенная разница между публичным человеком и обычным человеком,
это как сойти с ума - для меня во всяком случае - открыть себя целиком
для всего мира. </p>
</div>
<span>Цена</span>
<div class="service-price">
<ul>
<li>< 50</li>
<li>50-100</li>
<li>> 100</li>
</ul>
<ul>
<li>Сотрудников</li>
<li>Сотрудников</li>
<li>Сотрудников</li>
</ul>
<ul>
<li>от <span class="bold"><span class="large">5000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">15000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">25000</span> грн.</span></li>
</ul>
<button class="btn btn-small">
<span>Заказать</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
&#13;
答案 0 :(得分:1)
请查看以下修改后的代码:
这里我修改了HTML按钮:
<button data-infoCls=".info-4" data-divIdRef="#service-2,#service-4" class="info-1 btn">
其中data-infoCls
包含引用其他信息类,data-divIdRef
保存引用其他服务ID。因此,使用单个jquery点击功能,您可以管理您的逻辑。
$("button.btn[class*='info-']").on("click", function() {
var divIdRef = $(this).attr("data-divIdRef");
var infoCls = $(this).attr("data-infoCls");
$(divIdRef).css("visibility", "hidden");
$(infoCls).closest(".service").children(".service-detail-info").fadeOut(500);
$(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
$(divIdRef).css("visibility", "visible");
});
});
&#13;
.services-border {
width: 100%;
height: 540px;
}
/* line 40, ../scss/_content.scss */
.services-border > .services {
width: 1240px;
height: 270px;
left: 50%;
position: absolute;
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* line 46, ../scss/_content.scss */
.services-border > .services > .right {
float: right;
}
/* line 48, ../scss/_content.scss */
.services-border > .services > .right > .service-info {
right: 0;
}
/* line 51, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info {
left: 0;
}
/* line 53, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info > .border {
float: right;
margin-right: 10px;
}
/* line 59, ../scss/_content.scss */
.services-border > .services > .left {
float: left;
}
/* line 61, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info {
right: 0;
}
/* line 63, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info > .border {
float: left;
margin-left: 10px;
}
/* line 69, ../scss/_content.scss */
.services-border > .services > .service {
width: 620px;
height: 270px;
}
/* line 72, ../scss/_content.scss */
.services-border > .services > .service > .service-info {
position: absolute;
z-index: 1;
margin-top: 30px;
}
/* line 76, ../scss/_content.scss */
.services-border > .services > .service > .service-info > img {
float: left;
}
/* line 79, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text {
float: left;
width: 480px;
margin-left: 30px;
color: #3f4147;
font-size: 11pt;
font-family: "GothamProReg";
}
/* line 86, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > span {
display: inline-block;
}
/* line 89, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > h4 {
width: 400px;
font-size: 14pt;
font-family: "GothamProBold";
text-transform: uppercase;
margin-bottom: 15px;
line-height: 20px;
}
/* line 97, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > ul {
list-style-type: circle;
color: #a70c5d;
margin-left: 15px;
}
/* line 102, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > [class^="info"] {
width: 30px;
height: 30px;
border-radius: 30px;
border: 2px solid #a70c5d;
float: right;
text-align: center;
font-family: "BanderaProBold";
vertical-align: bottom;
line-height: 25px;
font-size: 16pt;
background: #fff;
}
/* line 114, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > [class^="info"]:hover {
background: #a70c5d;
color: #fff;
cursor: pointer;
}
/* line 120, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > ul > li > span {
color: #3f4147;
}
/* line 123, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > *:not(h4) {
line-height: 25px;
}
/* line 128, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info {
width: 630px;
height: 540px;
top: 0;
position: absolute;
z-index: 10;
display: none;
background: #fff;
}
/* line 136, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text {
margin-top: 45px;
}
/* line 138, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > span {
width: 60px;
font-family: "GothamProBlack";
font-size: 10pt;
float: left;
height: auto;
margin-top: 25px;
text-transform: uppercase;
}
/* line 147, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text {
width: 490px;
margin-left: 30px;
float: left;
}
/* line 151, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text > h4 {
font-family: "GothamProBold";
font-size: 14pt;
text-transform: uppercase;
line-height: 20px;
}
/* line 157, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text > p {
font-family: "GothamProReg";
font-size: 13pt;
margin-top: 20px;
line-height: 20pt;
}
/* line 164, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price {
width: 480px;
float: left;
margin-left: 30px;
margin-top: 25px;
}
/* line 169, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul {
width: 480px;
float: left;
}
/* line 172, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(1) {
font-size: 13pt;
font-family: "GothamProBold";
}
/* line 176, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(2) {
margin-top: 5px;
font-size: 11pt;
font-family: "GothamProReg";
}
/* line 181, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(3) {
margin-top: 20px;
font-family: "GothamProReg";
font-size: 11pt;
}
/* line 185, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(3) .large {
font-size: 16pt;
}
/* line 189, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul > li {
float: left;
width: 150px;
}
/* line 194, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > button {
margin-top: 30px;
}
/* line 199, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border {
height: 200px;
width: 0;
position: relative;
margin-top: 20px;
}
/* line 204, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:after, .services-border > .services > .service > .service-detail-info > .border:before {
top: 40px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
/* line 213, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:after {
border-width: 6px;
margin-top: -6px;
}
/* line 217, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:before {
border-width: 7px;
margin-top: -7px;
}
/* line 222, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right {
border-right: 1px solid #a70c5d;
}
/* line 224, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:after, .services-border > .services > .service > .service-detail-info > .border-right:before {
left: 100%;
}
/* line 227, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:after {
border-left-color: #fff;
}
/* line 230, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:before {
border-left-color: #a70c5d;
}
/* line 234, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left {
border-left: 1px solid #a70c5d;
}
/* line 236, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:after, .services-border > .services > .service > .service-detail-info > .border-left:before {
right: 100%;
}
/* line 239, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:after {
border-right-color: #fff;
}
/* line 242, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:before {
border-right-color: #a70c5d;
}
/* line 248, ../scss/_content.scss */
.services-border > .services > .service > .second-row > .border {
margin-top: 290px;
}
/* line 252, ../scss/_content.scss */
.services-border > .services > .service:hover {
cursor: default;
}
/* line 254, ../scss/_content.scss */
.services-border > .services > .service:hover #docs {
background: url("../img/sprite.png") -40px 0;
}
/* line 257, ../scss/_content.scss */
.services-border > .services > .service:hover #notebook {
background: url("../img/sprite.png") -40px -41px;
}
/* line 260, ../scss/_content.scss */
.services-border > .services > .service:hover #target {
background: url("../img/sprite.png") -42px -80px;
}
/* line 263, ../scss/_content.scss */
.services-border > .services > .service:hover #court {
background: url("../img/sprite.png") -42px -122px;
}
/* line 266, ../scss/_content.scss */
.services-border > .services > .service:hover:last-child {
right: 0;
}
/* line 272, ../scss/_content.scss */
.services-border #docs {
width: 40px;
height: 41px;
background: url("../img/sprite.png") 0 0;
}
/* line 277, ../scss/_content.scss */
.services-border #notebook {
width: 40px;
height: 39px;
background: url("../img/sprite.png") 0 -41px;
}
/* line 282, ../scss/_content.scss */
.services-border #target {
width: 42px;
height: 42px;
background: url("../img/sprite.png") 0 -80px;
}
/* line 287, ../scss/_content.scss */
.services-border #court {
width: 42px;
height: 42px;
background: url("../img/sprite.png") 0 -122px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="services-border">
<div class="services">
<div id="service-1" class="service left">
<div class="service-info">
<img id="docs" src="assets/img/transparent.png">
<div class="service-info-text">
<button data-infoCls=".info-4" data-divIdRef="#service-2,#service-4" class="info-1 btn">
<span>i</span>
</button>
<h4>Наведение порядка<br> в делах</h4>
<span>Аудит документов и платежей на предмет:</span>
<ul>
<li><span>соблюдения необходимых формальностей ипроцедур,</span></li>
<li><span>наличия всех оригиналов договоров, актов,</span></li>
<li><span>легализация зависших платежей.</span></li>
</ul>
</div>
</div>
<div class="service-detail-info">
<div class="border border-left"></div>
</div>
</div>
<div id="service-2" class="service right">
<div class="service-info">
<img id="notebook" src="assets/img/transparent.png">
<div class="service-info-text">
<button data-infoCls=".info-4" data-divIdRef="#service-1,#service-3" class="info-2 btn">
<span>i</span>
</button>
<h4>Оптимизация<br> договорных отношений </h4>
<ul>
<li><span>Доработка, латание дыр и улучшение условий основных типовых договоров вашей компании</span></li>
<li><span>Оформление сотрудников на оптимальных условиях ведения деятельности и налогообложения</span></li>
<li><span>Составление договоров, соглашений о конфиденциальности, публичных офферт</span></li>
</ul>
</div>
</div>
<div class="service-detail-info">
<div class="border border-right"></div>
<div class="service-detail-info-text">
<span>Услуга</span>
<div class="service-text">
<h4>Оптимизация<br>
договорных отношений</h4>
<p>Борьба внутри меня, и я был в самых разных
ситуациях в моей жизни. <span class="bold">Таким образом, борьба, что
у меня на постоянной основе, это просто пробовать
и быть лучше.</span></p>
<p>Есть определенная разница между публичным человеком и обычным человеком,
это как сойти с ума - для меня во всяком случае - открыть себя целиком
для всего мира. </p>
</div>
<span>Цена</span>
<div class="service-price">
<ul>
<li>< 50</li>
<li>50-100</li>
<li>> 100</li>
</ul>
<ul>
<li>Сотрудников</li>
<li>Сотрудников</li>
<li>Сотрудников</li>
</ul>
<ul>
<li>от <span class="bold"><span class="large">5000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">15000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">25000</span> грн.</span></li>
</ul>
<button class="btn btn-small">
<span>Заказать</span>
</button>
</div>
</div>
</div>
</div>
<div id="service-3" class="service left">
<div class="service-info">
<img id="target" src="assets/img/transparent.png">
<div class="service-info-text">
<button data-infoCls=".info-1" data-divIdRef="#service-2,#service-4" class="info-3 btn">
<span>i</span>
</button>
<h4>Правовое сопровождение<br> деятельности (юрист-аутсорсер)</h4>
<ul>
<li><span>Участие в заключении договоров: минимизация рисков, усиление ваших позиций</span></li>
<li><span>Юридическая консультация</span></li>
<li><span>Дайджест предпринимательских ИТ-новостей с разъяснениями</span></li>
<li><span>Представительство интересов в судах</span></li>
</ul>
</div>
</div>
<div class="service-detail-info second-row">
<div class="border border-left"></div>
</div>
</div>
<div id="service-4" class="service right">
<div class="service-info">
<img id="court" src="assets/img/transparent.png">
<div class="service-info-text">
<button data-infoCls=".info-2" data-divIdRef="#service-1,#service-3" class="info-4 btn">
<span>i</span>
</button>
<h4>Разработка договоров<br> и другой документации</h4>
<p>К сожалению, конфликты бывают в любой сфере. Если дело близится к суду или уже дошло до него,
мы поможем отстоять ваши права и интересы.</p>
</div>
</div>
<div class="service-detail-info second-row">
<div class="border border-right"></div>
<div class="service-detail-info-text">
<span>Услуга</span>
<div class="service-text">
<h4>Оптимизация<br>
договорных отношений</h4>
<p>Борьба внутри меня, и я был в самых разных
ситуациях в моей жизни. <span class="bold">Таким образом, борьба, что
у меня на постоянной основе, это просто пробовать
и быть лучше.</span></p>
<p>Есть определенная разница между публичным человеком и обычным человеком,
это как сойти с ума - для меня во всяком случае - открыть себя целиком
для всего мира. </p>
</div>
<span>Цена</span>
<div class="service-price">
<ul>
<li>< 50</li>
<li>50-100</li>
<li>> 100</li>
</ul>
<ul>
<li>Сотрудников</li>
<li>Сотрудников</li>
<li>Сотрудников</li>
</ul>
<ul>
<li>от <span class="bold"><span class="large">5000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">15000</span> грн.</span></li>
<li>от <span class="bold"><span class="large">25000</span> грн.</span></li>
</ul>
<button class="btn btn-small">
<span>Заказать</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
&#13;