Question

我正在创建一个页面，当我点击文字时会出现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();
    });
});

Answer 1

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

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

See this fiddle

如何显示和隐藏div

1 个答案: