Question

我在这里搜索了stackoverflow，但没有为我的案例找到解决方案..

如果单击向下按钮，我想做一个将出现或将隐藏的组div ...有这个HTML：

import { createHistory, useBasename } from 'history'

// Run our app under the /base URL.
const yourCustomHistoryWithBasename = useBasename(createHistory)({
  basename: '/base'
})
// Re-use the same history, which includes the basename
yourCustomHistoryWithBasename.push('/logout') // push /base/logout
yourCustomHistoryWithBasename.replace('/logout') // replace current history entry with /base/logout

和这个jquery：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Relatorio</title>
<script src="/Scripts/jquery-1.8.2.js"></script>


</head>


<body style="border-top: solid 10px #ffffff" class="container">

    <div>
        <div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <input type="text" id="" name="" />
                    </div>
                    <div class="col-lg-4">
                        <div>                           

                            <div>

                                <div style="border:1px solid black;font-size:20px;overflow:auto;">              

                                        <div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    Relatorio 01
                                                </div>
                                            </div>
                                        </div>

                                        <div class="container" style="background-color:orangered;padding-top:5px;padding-bottom:5px;color: white">
                                            <div class="row" style="text-align:right;">
                                                <div class="col-sm-8">
                                                    field1
                                                </div>
                                                <div class="col-sm-4" style="text-align:right;">
                                                    <div id='botabrefecha'>
                                                        <i class='fa fa-angle-down'></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="abrefecha" style="border:0px solid black;display:none">
                                            <div class="container" style="padding-top:5px;padding-bottom:5px;">
                                                <div class="row">
                                                    <div class="col-sm-4">
                                                        field2 Group
                                                    </div>
                                                    <div class="col-sm-8" style="text-align:right;">
                                                        <input type="text" style="width:100%;" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="container" style="padding-top:5px;padding-bottom:5px;">
                                                <div class="row">
                                                    <div class="col-sm-4">
                                                        field3 Group
                                                    </div>
                                                    <div class="col-sm-8" style="text-align:right;">
                                                        <input type="text" style="width:100%;" />
                                                    </div>
                                                </div>
                                            </div>                    

                                        </div>      

                                        <div class="container" style="padding-top:5px;padding-bottom:5px;">
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    txtCampo3
                                                </div>
                                                <div class="col-sm-8" style="text-align:right;">
                                                    <input type="text" style="width:100%;" />
                                                </div>
                                            </div>
                                        </div>   

                                </div>
                            </div>      

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


</body>
</html>

但我不知道为什么他不能展示或隐藏我的div。我已经测试了，如果可见或不可见，他会返回...但是当我试图显示或隐藏时，没有任何反应......

任何想法？

谢谢！

圣拉斐尔

Answer 1

在您的代码中只有一个包含类abrefecha的div，因此您可以直接访问该元素。对于元素的显示/隐藏，您可以使用jQuery的切换功能。

toggle

您可以直接在点击处理程序中访问该div。

$(document).ready(function () {
    $('#botabrefecha').on('click', function () {
        $('.abrefecha').toggle();   
    });            
});

Jquery - 获取最近的div和节目

1 个答案: