Question

我有这段代码，可以轻松地滑动3个div：

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

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

div被标记为以下（三次）：

<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）是位于图像上方的div，单击它们必须打开第一，第二或第三.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>

滑动项目符号切换外部div

1 个答案: