0

所以我试图让我的手风琴菜单发挥作用，这样当你点击一个菜单并打开它，然后点击另一个菜单时，前一个菜单应该关闭 - 但是当你点击它时似乎会自动打开然后关闭菜单.

有人可以检查我的代码以查看我缺少的内容吗？我尝试使用兄弟功能，但它根本不起作用，并且 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 链接以显示它的实际效果

4

2 回答 2

0 
$(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/

于 2013-06-30T23:56:06.627 回答
0

你可以做这样的事情

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

    });
});

演示

编辑：新版本涵盖@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');
    });
});

演示

于 2013-06-30T23:29:37.597 回答