CSS很难更改div的宽度

Question

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

sidebar-dropdown让我最难过。 而且此行没有影响（请参阅下面的js代码的ELSE部分中的内联注释）：

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

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

 <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');

看看情况如何...