Question

我有一个小问题，关于幻灯片和滑动，问题实际上是幻灯片，一旦我点击链接内容滑落，这没关系，但是当我试图关闭这张幻灯片时，它会滑动并滑动自动，我的意思是它一旦打开就无法关闭:)无论如何，希望在我展示代码后一切都会清晰：

    $items = $('#accordion a.item');
    $items.click(function () {
        $items.removeClass('selected');
        $(this).addClass('selected');
        $('#accordion li').children('ul').slideUp('slow'); 
        $(this).siblings('ul').slideDown('slow');  
        return false;
    });

和html：

<ul id="accordion">
    <li>
        <a href="#" class="item">BANKS</a>
        <ul>BLA BLA BLA</ul>
    </li>
    <li>
        <a href="#" class="item">PETROL</a>
        <ul>BLA BLA BLA</ul>
    </li>
</ul>

我想要的就是让它能够被关闭。

感谢大家帮助我，节省时间，我真的很感激！

Answer 1

幻灯片后你有一个幻灯片

    $('#accordion li').children('ul').slideUp('slow'); 
    $(this).siblings('ul').slideDown('slow');

当两者的选择器相等时，它将上下滑动。

如果点击的项目在点击时打开，您可以尝试跳过滑动的

修改

Javascript代码稍有改动

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $items = $('#accordion a.item');
        $('#accordion li').children('ul').slideUp('slow'); 
        $items.click(function () {
            $('#accordion li').children('ul').slideUp('slow'); 
            if ($(this)[0] != $('.selected')[0]) {
               $(this).siblings('ul').slideDown('slow');  
               $items.removeClass('selected');
               $(this).addClass('selected');
            } else {
               $items.removeClass('selected');
            }
            return false;
        });     
    }); 
</script>

Answer 2

Hiya你去演示：http://jsfiddle.net/uetGd/29/

修正了其他问题，您可以更多地改进它：http://jsfiddle.net/uetGd/39/

<强> HTML

<ul id="accordion">
    <li>
        <a href="#" class="item">BANKS</a>
        <ul>BLA BLA BLA</ul>
    </li>
    <li>
        <a href="#" class="item">PETROL</a>
        <ul>BLA BLA BLA</ul>
    </li>
</ul>

JQuery代码

$('.item')
    .ready(accordionSlideUpDown) // on ready
    .click(accordionSlideUpDown); // on click


function accordionSlideUpDown(){
    $('#accordion').children().children('ul').slideUp();
    $(this).next().slideToggle();   
}

或编辑

$('#accordion').children().children('ul').slideToggle();
var previous = "";

$('.item')
    .ready(accordionSlideUpDown) // on ready
    .click(accordionSlideUpDown); // on click


function accordionSlideUpDown(){
    var newval = $(this).text();

    $('#accordion').children().children('ul').slideUp();

    if (newval != previous){
         $(this).next().slideToggle('slow');
    }
      previous = $(this).text();                       
}

幻灯片滑落问题

2 个答案: