Question

我事先向所有可能质疑这个问题的人道歉。在最终尝试“破解”它之前，我已经搜索并尝试了许多不同的解决方案。

我知道必须有许多其他方法可以使用（JQuery，JavaScript等），但我不知道除了使用CSS之外如何解决这个问题。

这就是我想要实现的目标： 我遇到了Angular中的情况，当我点击其中一个锚点菜单链接时，我的主内容视图向左移动30px。我不知道为什么！

我检查了我的CSS，我检查了!important规则，我检查了线型，以及我能想到的其他所有内容。

当我在Chrome开发工具中查看我的样式时，我的CSS对于我的#main元素是正确的：

#main {
    float: left;
    width: calc(100% - 199px);
    margin-left: 199px;
    padding: 0 20px;
    transition: all .25s ease-in-out;
}

即使在我点击并且#main元素移动30px后，Chrome开发工具中的样式也没有显示任何变化。

当我在开发工具中删除我的margin-left参数的199px，并将其更改回199px时，元素将自己定位在完美的位置......

所以，我有以下想法;

在调整#main元素大小的href链接上创建CSS悬停规则，或
在我的href链接上创建一个inLine规则，该规则将调整#main元素的大小。

这是我的href链接的样子：

<li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li>

这是#main元素的CSS和我的菜单：

.adminMenu {
    background: #3a3a3a;
    padding: 24px 0 0;
    color: #eadfdb;
    display: inline-block;
    vertical-align: top;
    min-height: 100vh;
    transition: all .25s ease-in-out;
    position: fixed;
    animation: fadeIn 1s;
    left: 0;
    width: 199px
}

.side-nav li a {
    display: block;
    background: none;
    padding: 8px 10px;
    border-bottom: 1px solid #eadfdb;
    transition: background-color .25s ease-in-out;
    color: #eadfdb;
    height: 27px;
    overflow: hidden
}

.side-nav li a:hover {
    background-color: #f37934
}


#main {
    float: left;
    width: calc(100% - 199px);
    margin-left: 199px;
    padding: 0 20px;
    transition: all .25s ease-in-out
}

这是我看到课程的菜单：

<section class="adminMenu" ng-class="menuStateClass">
  <h3>{{fusionTitle}}</h3>
  <div id="minMaxMenu" ng-click="minMaxMenu()">
    <img src="images/collapse.svg" title="Click to expand" width="23" height="23" id="menuExpand" class="collapseIcon" ng-class="arrowDirectionClass" /> <span ng-show="showMenuHideText">Hide Menu</span>
  </div>
  <nav class="side-nav">
      <ul>
        <li id="socialMediaClick"><a href ng-click="redirectTodiv('top', $event)"><img title="Post List" src="images/postList.svg" title="" height="25" /><span class="navText">Summary</span></a></li>
        <li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li>
        <li><a href ng-click="redirectTodiv('volume', $event)"><img title="Volume" src="images/volumeHour.svg" title="" height="25" /><span class="navText">Volume</span></a></li>
        <li><a href ng-click="redirectTodiv('mediaSource', $event)"><img title="Media Source" src="images/postSource.svg" title="" height="25" /><span class="navText">Media Source</span></a></li>
        <li><a href ng-click="redirectTodiv('sentiment', $event)"><img title="Sentiment" src="images/sentiment.svg" height="25" /><span class="navText">Sentiment</span></a></li>
        <li><a href ng-click="redirectTodiv('engagers', $event)"><img title="Engagers" src="images/engagement.svg" height="25" /><span class="navText">Engagers</span></a></li>
        <li><a href ng-click="redirectTodiv('linkShares', $event)"><img title="Link Shares" src="images/source_list.svg" height="25" /><span class="navText">Link Shares</span></a></li>
        <li><a href ng-click="redirectTodiv('hashtags', $event)"><img title="Hashtags" src="images/hashtag.svg" height="25" /><span class="navText">Hashtags</span></a></li>
        <li><a href ng-click="redirectTodiv('appsUsed', $event)"><img title="Apps Used" src="images/twitterPlatform.svg" height="25" /><span class="navText">Apps Used</span></a></li>
        <li><a href ng-click="redirectTodiv('demographics', $event)"><img title="Demographics" src="images/demographics.svg" height="25" /><span class="navText">Demographics</span></a></li>
        <li><a href ng-click="redirectTodiv('wordCloud', $event)"><img title="Word Cloud" src="images/wordCloud.svg" height="25" /><span class="navText">Word Cloud</span></a></li>
        <li><a href="#summary_social_mentions_social_media#/support"><img title="Support" src="images/help.svg" title="" height="25" /><span class="navText">Support</span></a></li>
      </ul>
  </nav>
</section>

有什么想法吗？

Answer 1

如果其他人可能遇到类似的问题，我在JavaScript中使用以下解决方案修复了我的问题：

 $scope.redirectTodiv = function (divname, event) {
                var id = $location.hash();
                $location.hash(divname);
                $anchorScroll();
                $location.hash(id);

                styleAdjust();

};

function styleAdjust() {

    //DETECT BROWSER

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    /////////////////////////////////////////////////////
    // GET STYLE

    var elementMargin = document.getElementById("main");
    var style = elementMargin.currentStyle || window.getComputedStyle(elementMargin);

    ////////////////////////////////////////////////////
    // ADJUST

    if (isIE) {

        var oldValue = parseInt(style.marginLeft, 10);
        console.log("Current marginLeft: " + oldValue);

        var newValue = oldValue + 40;
        console.log("New marginLeft: " + newValue);

        document.getElementById("main").style.marginLeft = newValue + "px";

    }
    else if (isFirefox) {

        var oldValue = parseInt(style.marginLeft, 10);
        console.log("Current marginLeft: " + oldValue);

        var newValue = oldValue + 20;
        console.log("New marginLeft: " + newValue);

        document.getElementById("main").style.marginLeft = newValue + "px";
    }
}

使用inLine样式和CSS单击href链接时，设置元素的样式

1 个答案: