到slideToggle外部div的项目符号

Question

我有一小段代码，我用它来轻松地slideToggle 3div：

$(function () {
    $('.service-title').click(function () {
        $(this).next('.service-text').slideToggle();

        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
});

divs标记如下(三次)：

<div class="service-item">
    <div class="service-title"><h3>Title</h3></div>

    <div class="service-text">Text</div>
</div>

这个可以完美地工作。然而，我正在做的项目需要我添加一个旁边有3个子弹的图像。这些项目符号(.bullet-1、.bullet-2和.bullet-3)位于图像上方，单击它们中的每一个都必须打开第一个、第二个或第三个.service-item。然而，这些div不在同一父div中，我不知道如何通过单击项目符号div来定位相应的切换div。

完整的HTML标记：

<div class="colgroup-2">
    <div class="col">
        <div class="services-image">
            <img />

            <div class="bullet-1"></div>
            <div class="bullet-2"></div>
            <div class="bullet-3"></div>
        </div>
    </div>

    <div class="col">
        <div class="wrapper"> <!-- / used to vertically align content -->
            <div class="service-item">
                <div class="service-title"><h3>Title</h3></div>

                <div class="service-text">Text</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title</h3></div>

                <div class="service-text">Text</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title</h3></div>

                <div class="service-text">Text</div>
            </div>
        </div>
    </div>
</div>

提前感谢！

Answer 1

您可以在您的案例中使用以下代码：

$(function(){
    $('[class*="bullet"]').on('click', function(){
        var relatedIndex = $('[class*="bullet"]').index($(this));
        $('.service-item').not($('.service-item').eq(relatedIndex)).slideUp();
        $('.service-item').eq(relatedIndex).slideToggle();
    });
});

​

$(function(){
  $('[class*="bullet"]').on('click', function(){
    var relatedIndex = $('[class*="bullet"]').index($(this));
    $('.service-item').not($('.service-item').eq(relatedIndex)).slideUp();
    $('.service-item').eq(relatedIndex).slideToggle();
  });
});

.service-item { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colgroup-2">
    <div class="col">
        <div class="services-image">
            <img />

            <div class="bullet-1">&#8226;</div>
            <div class="bullet-2">&#8226;</div>
            <div class="bullet-3">&#8226;</div>
        </div>
    </div>

    <div class="col">
        <div class="wrapper"> <!-- / used to vertically align content -->
            <div class="service-item">
                <div class="service-title"><h3>Title 1</h3></div>

                <div class="service-text">Text 1</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title 2</h3></div>

                <div class="service-text">Text 2</div>
            </div>

            <div class="service-item">
                <div class="service-title"><h3>Title 3</h3></div>

                <div class="service-text">Text 3</div>
            </div>
        </div>
    </div>
</div>

​