Question

使用以下代码在同一页面中加载外部，在<div id="menu">我有菜单，当点击选项时，外部页面将被加载到<div class="page"></div>

内

菜单宽度为25％
页面是70％

现在如何在加载外部页面时将<div id="menu">的宽度更改为10％

完整代码

<!DOCTYPE html>
   <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #menu{width:25%;background-color:beige;float: left}
            .page{width: 70%;height:200px;float: left;background-color: #99ffff}
        </style>
    </head>
    <body>
        <div class="container">
        <div class="box">                                        
            <div id="leftmenu">
                <ul id="leftmenuidfrmslt">
                    <li><span class="flaticon-smart"></span><text>&nbsp;&nbsp;Mobile & Tablet</text>
                        <ul>
                            <li><a class="reveal" href="postpage/mobile.php">&Xi;&nbsp;Mobile Phones</a></li>
                            <li><a class="reveal" href="postpage/tablet.php">&Xi;&nbsp;Tablets</a></li>
                            <li><a class="reveal" href="postpage/mobileaccessories.php">&Xi;&nbsp;Mobile Accessories</a></li>
                        </ul>
                    </li>
</div>
        <div class="page"></div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
             $(document).ready(function() {
                $('.reveal').on('click', function(e) {
                    e.preventDefault();
                    var link = $(this).attr('href');
                    $('.page').load(link);
                    $('#leftmenu').css('width', '70px');
                    $("#leftmenu text").hide();
                    $('#leftmenu').off("click");
                    $(this).show();
                });
            });
        </script>
    </body>
</html>

Answer 1

使用jquery css $('#menu').css('width', '10%');

更改宽度

$（document）.ready（function（）{

        $('.reveal').on('click', function(e) {
            e.preventDefault();
            var link = $(this).attr('href');
            $('.page').load(link);
            $('#menu').css('width', '10%');
            $(this).show();
        });

当外部页面加载到同一页面</div>时，减少<div>宽度

1 个答案: