javascript - jquery显示和隐藏菜单问题

Question

我对 Jquery 很陌生，所以请原谅我的简单问题。我创建了一个多重显示和隐藏菜单，效果很好，但是我想向它添加一个额外的功能。例如，当单击 blackJack 1 插槽时，它会打开下拉菜单。当我在打开它的同时单击它时也会关闭菜单。看看我的代码，有人知道这是如何实现的吗？

目前，当您单击“插槽”时，当前作品会打开下一个插槽并关闭前一个插槽。

HTML

<div class="drop-inner slots">
    <h2>Blackjack</h2>
</div>

<div class="hide-me">
    <p>content goes here</p>
</div>


<div class="drop-inner slots">
    <h2>Blackjack 2</h2>
</div>

<div class="hide-me">
    <p>content goes here</p>
</div>

<div class="drop-inner slots">
    <h2>Blackjack 3</h2>
</div>

<div class="hide-me">
    <p>content goes here</p>
</div>

Javascript

$(function () {
     $('.slots').click(function () {
        var $this = $(this);
        $('.hide-me').slideUp().removeClass('active');
        $this.next('.hide-me').slideDown('slow').addClass('active');
     });
 });

Answer 1

这可以解决问题

$(function () {
    $('.hide-me').hide();
    $('.slots').click(function () {
        var $this = $(this);
        var $thisHideMe = $this.next('.hide-me');
        $('.hide-me').not($thisHideMe).slideUp().removeClass('active');
        $thisHideMe.slideToggle('slow').toggleClass('active');
    });
});

演示

Answer 2

验证$next元素是否可见。

$('.slots').click(function () {

    var $this = $(this);
    var $next = $this.next('.hide-me');

    $('.hide-me').slideUp().removeClass('active');
    if ($next.css('display') !== 'none') {
        $next.slideUp('slow').removeClass('active');
    } else {
        $next.slideDown('slow').addClass('active');
    }
});

JSFIDDLE

Answer 3

这里：http: //jsfiddle.net/nexk5/1/ :)

 $(function () {
     $('.slots').click(function () {
         var $this = $(this);
         var $next_hideme = $this.next('.hide-me');
         $('.hide-me').not($next_hideme).slideUp().removeClass('active');
         if (!$next_hideme.hasClass('active')) {
             $next_hideme.slideDown('slow').addClass('active');
         } else {
             $next_hideme.slideUp('slow').removeClass('active');
         }
         });
     });