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');
    });
});

DEMO

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');
         }
         });
     });

jquery显示和隐藏菜单问题

HTML

的Javascript

3 个答案: