Question

我在视图中有一个简单的html元素。我想在这个视图中实现slideToggle。我认为它很简单，但我无法弄清楚确切的代码。我想在单击“选择房间”按钮时向下滑动display_room类。我无法使用ID，因为它处于循环中。因此，使用类我需要找到解决方案。

这是我的HTML代码。

<div class="panel-body pn_bdy" id="hotel-container">
    <div class="col-md-2" style="padding-left: 8px;">

    </div>
    <div class="col-md-6" style="padding-left: 0px;">
        <div class="hotel_name">
            <a href="#"><span style="color: #0896ff">

            </span></a>
            <p class="side_detail"><span style="font-size: 11px; color: #999999">  </span></p>


            <a style="cursor: pointer;" class="show_map" map="map{{$i}}{{$rand}}" lat="" lng=""><p style="margin-top: 8px; color: #337AB7"><b>view on map</b></p></a>
            <div class="map" id="map{{$i}}{{$rand}}"></div>

        </div>
    </div>
    <div class="col-md-2" style="padding-left: 0px;">
        <div class="rating">

        </div>
    </div>
    <div class="col-md-2 slc_rm">
        <p><span style="font-size: 16px; "></span></p>
        <div class="select_room" id="sl_button">
            <span class="btn btn-primary">Select Room</span>
        </div>
    </div>
</div>
<div class="wrapper-dropdown-menu" id="displayfilterr">
    <div class="display_room">
        Rooms
    </div>
</div>

这是我的jquery，我试过了。首先尝试：

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){
            $(this).parents('.slc_rm').parents('.pn_bdy').next().find('.display_room').slideToggle();
        });
    });

其次，我试过了：

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){

            $(this).parent().parent().next().find(".display_room").slideToggle();
        });
    });
</script>

Answer 1

试试这个parents('.pn_bdy:first')会向大多数家长panel-body提供，.next()会提供下一个div，然后find(".display_room")。

 $(".select_room").click(function(){
            $(this).parents('.pn_bdy:first').next().find(".display_room").slideToggle();
    });

$(document).ready(function(){
        $(".select_room").click(function(){
            $(this).parents('.pn_bdy:first').next().find(".display_room").slideToggle();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body pn_bdy" id="hotel-container">
    <div class="col-md-2" style="padding-left: 8px;">

    </div>
    <div class="col-md-6" style="padding-left: 0px;">
        <div class="hotel_name">
            <a href="#"><span style="color: #0896ff">

            </span></a>
            <p class="side_detail"><span style="font-size: 11px; color: #999999">  </span></p>


            <a style="cursor: pointer;" class="show_map" map="map{{$i}}{{$rand}}" lat="" lng=""><p style="margin-top: 8px; color: #337AB7"><b>view on map</b></p></a>
            <div class="map" id="map{{$i}}{{$rand}}"></div>

        </div>
    </div>
    <div class="col-md-2" style="padding-left: 0px;">
        <div class="rating">

        </div>
    </div>
    <div class="col-md-2 slc_rm">
        <p><span style="font-size: 16px; "></span></p>
        <div class="select_room" id="sl_button">
            <span class="btn btn-primary">Select Room</span>
        </div>
    </div>  
</div>
<div class="wrapper-dropdown-menu" id="displayfilterr">
    <div class="display_room">
        Rooms
    </div>
</div>

Answer 2

删除 next（）方法 根据您的评论slide down the display_room class when clicked on select Room button

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){

            $("#display_room").find(".display_room").slideToggle();
        });
    });
</script>

jquery next（），find（）无效

2 个答案: