分部必须隐藏多个

时间:2017-05-02 06:10:40

标签: jquery html5 jquery-ui

当我点击视图(id)时,该行必须消失,并且像往常一样,面板 - 身体部门必须显示由于手风琴而工作正常。我需要这样做才能点击视图(id)隐藏多个部门可以任何人给我建议如何做到这一点

这是我的HTML页面

  <div id="accordion">    
        <div class="row" id="view">
            <span class="col-md-4">Mobile Number</span>
            <span class="col-md-4">7894561236</span>
            <span  class="col-md-4">Edit</span></span>
        </div>
        <div class="panel-body ">
            <div class="row accordion-panel-bg">
                <div class="col-md-7 col-md-offset-2 text-center">

                    <label  class="col-md-4">Mobile Number</label>     
                    <div class="col-md-8">
                        <input type="hidden" name="mobile_no" id="mobile_no" value="<?php echo $row->mobile_no; ?>" />
                        <input type ="text" class="form-control" name="mobile_no" id="mobile_no" value="<?php echo $row->mobile_no; ?>"/></br>
                        <input type="submit" value="Save" class="btn btn-success" style="width:70px;">
                        <!--                                            <button type="button" class="btn btn-success">Save</button>-->
                        <button type="button" class="btn btn-warning cancel-name">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <span class="col-md-4">Password</span>
            <span class="col-md-4">XXXXX</span>
            <span  class="col-md-4">Edit</span></span>
        </div>
        <div class="panel-body ">
            <div class="row accordion-panel-bg">
                <div class="col-md-7 col-md-offset-2 text-center">

                    <label  class="col-md-4">Password</label>          
                    <div class="col-md-8"> 
                        <input type="hidden" name="password" id="password" value="<?php echo $row->password; ?>" />
                        <input type ="text" class="form-control" name="password" id="password"/></br>
                        <input type="submit" value="Save" class="btn btn-success" style="width:70px;">
                        <!--                                            <button type="button" class="btn btn-success">Save</button>-->
                        <button type="button" class="btn btn-warning cancel-name">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>    

这是我使用的脚本

<script>
        $(function () {
            $("#accordion").accordion({collapsible: true, active: false});
        });
    $("doccument").ready(function(){
        $("#view").click(function(){
        $("#view").hide();
        });
    });
    </script>

1 个答案:

答案 0 :(得分:1)

建议如下:

<强>的JavaScript

$(function () {
  $("#accordion").accordion({
    collapsible: true,
    active: false
  });
  $("#view").click(function(){
    $(this).hide();
  });
});

这将隐藏#view元素。没有办法取消隐藏它,因此如果用户导航到另一个面板,他们将无法返回。工作示例:https://jsfiddle.net/Twisty/przndthk/

这在我看来有点奇怪。您可能需要考虑更类似的内容:https://jsfiddle.net/Twisty/przndthk/3/