带有切换动画的 jQuery 框打开/关闭功能

Question

我有这个 jquery 函数。我需要一个切换功能来打开和关闭 div 框。但同时我需要它用动画关闭所有打开的 div 框，然后打开您单击的那个。

JS:

function showAndHidediv(id) {
$("#" + id).slideToggle();
}

HTML:

<a onclick="showAndHidediv('test');">Open 1</a>    
<a onclick="showAndHidediv('test2');">Open 2</a>    
<a onclick="showAndHidediv('test3');">Open 3</a>

<div id="test" class="accordionBox">Test 1</div>
<div id="test2" class="accordionBox">Test 2</div>
<div id="test3" class="accordionBox">Test 3</div>

CSS:

.accordionBox {
    width: 100%!important;
    display: none;
    height: 100px;
    overflow: hidden;
    background-color: #119df2;
}

JS fiddle :

JS fiddle here

Answer 1

您应该避免在 html 中使用 onclick 和其他内联属性。 您的问题的解决方案:

<a href="#" data-tab-id="test1" class="open-box">Open 1</a>
<a href="#" data-tab-id="test2" class="open-box">Open 2</a>
<a href="#" data-tab-id="test3" class="open-box">Open 3</a>

<div id="test1" class="accordionBox">Test 1</div>
<div id="test2" class="accordionBox">Test 2</div>
<div id="test3" class="accordionBox">Test 3</div>

还有 JS:

$('.open-box').click(function() {

    var box =  $('#' + $(this).attr('data-tab-id'));

    if(box.is(":visible")){
        box.toggle(500);
        return;
    }

    var visibleBoxes = $('.accordionBox:visible')
    if (visibleBoxes.length > 0) {
        $('.accordionBox:visible').toggle(500);

    }

    box.toggle(500);
});

JS fiddle :https://jsfiddle.net/0zextx9t/7/