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小提琴：

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小提琴：https://jsfiddle.net/0zextx9t/7/

jQuery框打开/关闭功能与切换动画

1 个答案: