Question

我正在尝试实现Bootstrap glyphicon-plus和glyphicon-minus。但是当我点击glyphicon-plus时，它没有触及控件。我认为我在JQuery代码中做错了。请指导我。提前谢谢。

//我的JavaScript

  $('.collapse').on('shown.bs.collapse', function () {
        $(this).closest('div#aa').prev("a").find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    }).on('hidden.bs.collapse', function () {
        $(this).closest('div#aa').prev("a").find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
    });

//查看代码

<div class="panel panel-default">
                <div class="panel-heading">
                    Search            
                </div>
                <div id="aa" class="panel-body">

                    @Html.TextBoxFor(m => m.txtA, new {@class = "form-control"})

                    <a id="advance" href="#" class="control-label"><span class="glyphicon glyphicon-plus"></span></a>                     
                </div>
            </div>   


        <div id="advancedcontainer" class="collapse">
            <div class="panel panel-default">
               <div class="panel-body">                
                        @Html.LabelFor(model => model.StartDate, "Start Date")
                        @Html.TextBoxFor(m => m.StartDate, new { @class = "form-control", style = "width: 155px", placeholder = Html.DisplayNameFor(n => n.StartDate) })
                        @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })

                        @Html.LabelFor(m => m.Distance)
                        @Html.DropDownListFor(m => m.Distance, Model.DistanceOptions, "--Please Select--", new { @class = "form-control", style = "width: 150px;" })
                        @Html.ValidationMessageFor(m => m.Distance)

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

Answer 1

您无法使用closest('div#aa')。 closest会找到父母。

.collapse和panel panel-default是兄弟姐妹。

首先应$(this).parent().find('#advance span')找到父母，然后你会找到span。

Bootstrap Glyphicon不会畏缩

1 个答案: