Question

在单击打开另一个展开div的链接时，需要一些帮助来关闭展开的div。

我尝试使用其他函数的示例，但是我对它的理解不足以使它工作。

这是HTML：

<div class="service" id="service-box1">
    <a class="learn-more" id="show1" data-href="service1">Learn More</a>
</div>
<div class="service" id="service-box2">
    <a class="learn-more" id="show2" data-href="service2">Learn More</a>
</div>
<div class="service-content" id="service1">
    <p>Title</p>
</div>
<div class="service-content" id="service2">
    <p>Title</p>
</div>

功能如下：

$('document').ready(function() {
    $('#show1').click(function() {
        var $div = $('#' + $(this).data('href'));
        $('#serivce1').not($div).hide();
        $div.slideToggle();
    });
});

$('document').ready(function() {
    $('#show2').click(function() {
        var $div = $('#' + $(this).data('href'));
        $('#serivce2').not($div).hide();
        $div.slideToggle();
    });
});

因此，如果单击#show1按钮并显示#service1 div，然后单击#show2按钮，则#service1 div应该关闭并打开#service2 div。

Answer 1

我认为您可以尝试使用onclick函数。

HTML

<div class="service" id="service-box1">
    <a class="learn-more" id="show1" data-href="service1" onclick="showservice1()">Learn More</a>
</div>

<div class="service" id="service-box2">
    <a class="learn-more" id="show2" data-href="service2" onclick="showservice2()">Learn More</a>
</div>

JQUERY / JS

function showservice1() {
    $('#service1').show(100);
    $('#service2').hide(100);
}

function showservice2() {
    $('#service1').show(100);
    $('#service2').hide(100);
}

还有1件事...

我看到了您 TYPO ，您在其中将ID声明为“ service1”和“ service2”，但在jquery中，您将其称为“ serivce1”和“ serivce2”。这就是为什么它不起作用

希望这对您有所帮助

单击其他div链接时关闭div

1 个答案: