如何显示和隐藏div

时间:2016-05-10 12:08:17

标签: jquery html css

我正在创建一个页面,当我点击文字时会出现div,当我点击相同的文字时,div就会消失。

这是我的HTML代码:

<div id="description" class="tab-pane fade">
    <div class="faq-row">                      
        <a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a>
    </div>
    <div class="col-md-12 faq-row-content">                     
        <ul>
            <li>
                LR's spacious apartments provide ample room for work and play.
            </li>
            <li>
                Guests can access high speed internet and cable television from every room.
            </li>

        </ul>
    </div>                     
    <div class="faq-row">
        <a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a>
    </div>
    <div class="col-md-12 faq-row-content">                       

        <ul>
            <li>
                LR's spacious apartments provide ample room for work and play.
            </li>
            <li>
                Guests can access high speed internet and cable television from every room.
            </li> 

        </ul>
    </div>                     
</div>

我需要的是当我点击第一个链接然后第一个div出现并消失;当我点击第二个链接时,第二个div出现并消失。 此时,当我点击链接时,没有任何反应。

这是我的jQuery代码:

$(document).ready(function(){
    $(".faq-row-handle").click(function(){
        $(".faq-row-content").slideToggle();
    });
});

1 个答案:

答案 0 :(得分:2)

使用$(this)代替类选择器将next()元素定位到slideToggle()

$(document).ready(function(){
    $(".faq-row-handle").click(function(){
        $(this).parent().next().slideToggle();
    });
});

See this fiddle