Question

我有2个div category-block-1和category-block-2。 category-block-2有display:none;。我正试图从左到右切换它们。以下是我的HTML结构的样子。

<div class="top-categories-block">
    <i class="fa fa-caret-left category-left"></i>
    <ul class="top-categories-list">
        <div class="category-block-1">
             ...
        </div>
        <div class="category-block-2">
             ...
        </div>
    </ul>
    <i class="fa fa-caret-right category-right"></i>
</div>

我的JS代码实现上述条件如下

$('.top-categories').on('click', '.category-left', function() {
    $('.category-block-1').toggle('slide', { direction: 'left' }, 500);
    $('.category-block-2').toggle('slide', { direction: 'left' }, 500);
});

$('.top-categories').on('click', '.category-right', function() {
    $('.category-block-1').toggle('slide', { direction: 'right' }, 500);
    $('.category-block-2').toggle('slide', { direction: 'right' }, 500);
});

这会切换可见性状态，但不会使幻灯片生效。我已经包含了jQuery UI js和css文件。

Answer 1

2 <div>的内容被设置为浮动。

在<div class="clearfix"></div>的结束</div>标记之前添加<div>解决了问题。

Answer 2

尝试以下方法。这是工作。我刚刚添加了jQuery UI库的参考并进行了更改 $('.top-categories')至$('.top-categories-block')

$('.top-categories-block').on('click', '.category-left', function() {
    $('.category-block-1').toggle('slide', { direction: 'left' }, 500);
    $('.category-block-2').toggle('slide', { direction: 'left' }, 500);
});

$('.top-categories-block').on('click', '.category-right', function() {
    $('.category-block-1').toggle('slide', { direction: 'right' }, 500);
    $('.category-block-2').toggle('slide', { direction: 'right' }, 500);
});

以下是JSFiddle http://jsfiddle.net/53dm3yee/1/

的工作代码

Answer 3

首先将.top-categories更改为.top-categories-block并：

$('.category-block-1').show('slide', {direction:'right'}, 500);
$('.category-block-2').show('slide', {direction:'right'}, 500);

Answer 4

了解$(...).toggle('slide', { direction: 'left' }, 500);在不同的jQuery版本中的工作原理：

jQuery 1.7.2 + jQuery UI 1.8.18

jQuery 1.9.1 + jQuery UI 1.9.2

jQuery edge + jQuery UI 1.8.5 - 无法正常工作

jQuery切换（'slide'）切换可见性状态但没有幻灯片效果

4 个答案: