javascript - css 难以改变 div 的宽度

Question

如果我进入 Chrome 的 f12 开发工具并检查 ，我可以手动减小宽度；但是，我在通过 javascript 执行此操作时遇到了麻烦。我的实现是使用 AngularJS，并编写指令。

sidebar-dropdown 类让我最伤心。并且这一行没有影响(请参阅下面 js 代码的 ELSE 部分中的内联注释):

    element.find('.sidebar-dropdown a').css('width', '30px');

这是我的侧边栏 html，带有左侧的新栏和可折叠图标:

 <div data-cc-sidebar data-ng-controller="sidebar as vm">
    <div class="sidebar-filler"></div>
    <div class="sidebar-dropdown"><a href="#"><i class="fa fa-arrow-circle-left hit"></i></a></div>

    <div class="sidebar-inner">
    <div class="sidebar-widget">
    </div>

    <ul class="navi">                     
         ...
    </ul> 
   <a id="addReportLink" href="" ng-click="vm.addReportToTree(e)" title="Add Report">
        <b class="fa fa-plus-square"></b>
    </a>
    <div style="float:left;">                
        <span id="treeview" kendo-tree-view="tree"                           
            k-options="vm.treeOptions"
            k-data-source="vm.reportsTree"
            k-on-change="vm.onTreeSelect(kendoEvent)">
        </span>        
    </div>         
  </div>
</div>

和我的 Angular 指令:

app.directive('ccSidebar', function () {
    // Opens and clsoes the sidebar menu.
    // Usage:
    //  <div data-cc-sidebar>
    // Creates:
    //  <div data-cc-sidebar class="sidebar">
    var directive = {
        link: link,
        restrict: 'A'
    };
    return directive;

    function link(scope, element, attrs) {                      
        var $sidebarInner = element.find('.sidebar-inner');            
        var $dropdownElement = element.find('.sidebar-dropdown a');
        element.addClass('sidebar');           

        $dropdownElement.addClass('dropy');     // added line = BM:
        $dropdownElement.click(dropdown);

        function dropdown(e) {
            var dropClass = 'dropy';
            e.preventDefault();
            if (!$dropdownElement.hasClass(dropClass)) {    // show

                $dropdownElement.find('i').removeClass('fa fa-arrow-circle-right');
                $dropdownElement.find('i').addClass('fa fa-arrow-circle-left');
                element.find('.sidebar-filler').css('width', '230px');

                $('.sidebar-dropdown a').addClass(dropClass);
                $sidebarInner.slideDown(350);                   
                $dropdownElement.addClass(dropClass);
            } else if ($dropdownElement.hasClass(dropClass)) {  // hide
                $dropdownElement.removeClass(dropClass);
                $dropdownElement.find('i').removeClass('fa fa-arrow-circle-left');
                $dropdownElement.find('i').addClass('fa fa-arrow-circle-right');                    

                $sidebarInner.slideUp(350);

                element.find('.sidebar-filler').css('width', '30px');   

                 // THESE TWO LINES HAVE NO AFFECT !!! 
                element.find('.sidebar a').css('width', '30px');
                element.find('.sidebar-dropdown a').css('width', '30px');

            }                
        }
    }
});

Answer 1

您可能需要设置 <a> 的显示要阻止的标记。或者，如果您使用最小宽度，您可能会很幸运。

a{display:block;}

或

element.find('.sidebar a').css('min-width','30px');

看看进展如何...