Question

所以我试图让我的手风琴菜单运行，这样当你点击一个菜单然后打开，然后点击另一个菜单，上一个菜单应该关闭 - 但似乎自动打开然后关闭菜单点击它。

有人可以查看我的代码，看看我错过了什么吗？我尝试使用兄弟姐妹函数，但它根本不起作用，而find函数导致上述问题。

HTML

设计系列

  <div class="sideContent">
    <ul>
      <li><a href="http://www.nerosdecoshoppe.com/collections/275070-assorted-designs">Assorted Designs</a></li>
      <li><a href= "http://www.nerosdecoshoppe.com/collections/202951-kiss-me-goodnight">Kiss Me Goodnight</a></li>
      <li><a href= "http://www.nerosdecoshoppe.com/collections/202954-natures-phone-call">Into the Wild</a></li>
      <li><a href= "http://www.nerosdecoshoppe.com/collections/202949-alice-n-stripes">Alice n Stripes</a></li>
      <li><a href= "http://www.nerosdecoshoppe.com/collections/202950-magical-kingdom">Magical Kingdom</a></li>
    </ul>
  </div>
</div>

<div>
  <a href="%20#" class="sideHeader">decoden cases</a>

  <div class="sideContent">
    <ul>
      <li><a href="http://www.nerosdecoshoppe.com/collections/202952-whip-cream">WhipCream</a></li>
      <li><a href="http://www.nerosdecoshoppe.com/collections/202953-rhinestone-pearls">Rhinestones/Pearls</a></li>
    </ul>
  </div>
</div>

jQuery的：

$(document).ready(function () {
    $('.sideContent').hide();
    $('.sideHeader').click(function () {
        event.preventDefault();
        $(this).next().slideToggle('fast')
        //.parent().parent().find('.sideContent:visible').slideUp('fast');
        .parent().parent().siblings.find('.sideContent:visible').slideUp('fast');
    });
});

这是一个jFiddle link来展示它的实际效果

Answer 1

你可以做这样的事情

$(document).ready(function () {
    $('.sideContent').hide();
    $('.sideHeader').click(function () {
        event.preventDefault();
        $('.sideContent').slideUp('fast');
        $(this).next().slideToggle('fast');

    });
});

DEMO

编辑：新版本涵盖@nevermind

所描述的场景

$(document).ready(function () {
    $('.sideContent').hide();
    $('.sideHeader').click(function () {
        event.preventDefault();
        var $slideContent = $(this).next();
        var slideDown =  $slideContent.is(":not(:visible)");
        $('.sideContent').slideUp('fast');

        if (slideDown)
            $slideContent.slideDown('fast');
    });
});

DEMO

Answer 2

$(document).ready(function () {
    $('.sideContent').hide();
    $('.sideHeader').click(function (event) {
        event.preventDefault();
      //  $(this).next()
    $(this).next().slideToggle('fast');
    $('#sidenav').find('a').not(this).next().slideUp('fast');   



    });
});

这会奏效。 jsfiddle目前非常缓慢...... http://jsfiddle.net/sinisake/76MbN/3/

jQuery手风琴儿童没有隐藏

2 个答案: