单击其他div链接时关闭div jquery

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);
}

还有一件事......

我看到你在TYPO中将ID声明为“service1”和“service2”但在jquery中你称为“serivce1”和“serivce2”。 这就是为什么它不会工作

希望这能帮到你