0

So right now, I have a basic slide and toggle script which with help now has a background added to it when clicked. However, I would like it so when another "CLICK ME" is clicked it closes that div and opens the new div. In essence I don't want toggled divs constantly overlapping each other.

http://jsfiddle.net/schermerb/rAMQT/6/

<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>

.toggleBtn {
    font:14px noral Futura, sans-serif;
    color:black;
    margin:50px;
    cursor:pointer
}
.below {
    background:red;
}
.toggleBtn.active{
    background:blue;   
}

    $(document).ready(function () {
        var content = $('.below').hide();
        $('.toggleBtn').on('click', function () {
            $(this).next('.below').slideToggle();

            $(this).toggleClass('active');
            return false;
        });
        //register the handler to button element inside .below
        $('.below .close').on('click', function () {
            //find the ancestor .below element of the clicked button
            $(this).closest('.below').slideToggle();
        });
    });
4

2 に答える 2

2

この方法を試してください：

       var $this = $(this);
       $this.next('.below').slideToggle().siblings('.below').slideUp();
       $this.toggleClass('active').siblings('.toggleBtn.active').removeClass('active');

それ以外の

     $(this).next('.below').slideToggle();

フィドル

于 2013-10-15T21:05:07.807 に答える
1

これを使って：

var the_others = $('.active').not(this);
the_others.removeClass('active');
the_others.next('.below').slideUp();

フィドル

于 2013-10-15T21:09:42.597 に答える