0

だから、アコーディオンメニューを機能させようとしているので、あるメニューをクリックして開いてから別のメニューをクリックすると、前のメニューが閉じますが、クリックするとメニューが自動的に開いて閉じます.

誰かが私のコードをチェックして、何が欠けているかを確認できますか? siblings 関数を使用しようとしましたが、まったく機能せず、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.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 に答える
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 に答える