代码之家  ›  专栏  ›  技术社区  ›  AleshaOleg

如何用一个函数替换jQuery中的.onclick()

  •  -1
  • AleshaOleg  · 技术社区  · 9 年前

    我有 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>
    1 回复  |  直到 8 年前
        1
  •  1
  •   vijayP    9 年前

    请查看以下修改的代码:

    在这里,我将按钮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");
        });
    });
    .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;
    }
    <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>