Question

我正在为导航栏创建一个“更多”按钮。该代码采用了几个现有按钮，并将它们附加到未显示的div元素上，当鼠标悬停在该按钮上时，该元素将变为可见。该按钮是该行的最后一个。 div滑出屏幕，因此我在CSS中插入了right:0px; / left:0px（取决于语言方向）规则。但是发生的那一刻，所有li元素（添加到div中的按钮）都彼此内联出现，而不是一个在另一个下面。

HTML结构为：

<div id="toolbarcontrol">
<nav>
<ul id="menuList">
<li>Button</li>
<li>Button</li>
<li>Button</li>
//this is where the code inserts the new button.
</ul>
</nav>
</div>

jquery代码是：

   function MoreButton() { //Specific Buttons appending
        window.jQuery && (clearInterval(myMoreButtonInterval), jQuery(window.parent.document).ready(function() {
            //Getting buttons to append.
        var buttons = $('#MoreButton').attr("data-buttons").split(",");
            //Getting necessary CSS.
        var styleText = $('style').html();
        var backgroundcolor = $('#toolbarControl').css("background-color"); //Getting the background color from the menu bar.
            //Changing CSS based on language.
            if (document.getElementsByTagName("html")[0].getAttribute("dir") == "RTL") {
                styleText += '\n' + '#toolbarmorebutton .nav-item {display:inherit;}' + '\n' + '#itemMore:hover > #toolbarmorebutton{display:block !important; background-color:' + backgroundcolor + ' !important;}' + '\n' + '#toolbarmorebutton {position:fixed; left:0px;}';
            } else {
                styleText += '\n' + '#toolbarmorebutton .nav-item {display:inherit;}' + '\n' + '#itemMore:hover > #toolbarmorebutton{display:block !important; background-color:' + backgroundcolor + ' !important;}' + '\n' + '#toolbarmorebutton {position:fixed; right:0px;}';
            }
            //Applying CSS.
        $('style').html(styleText); //Applying style.
            //Adding new button and div (language based).
            var moretext;
        //Code that selects the language goes here, it works ok but is long so I cut it out.
        $("#menuList").append('<li id="itemMore" role="menuitem" class="nav-item" tabindex="-1"><p title="More options" class="link color-s1" id="lnkMore" tabindex="-1">' + moretext + '</p><div id="toolbarmorebutton" style="display: none;" title="More options"></div></li>');
            //Adding buttons if they were chosen.
        if (buttons.includes('Sign in')) {
        $('#itemSignIn').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Folder')) {
        $('#itemFolder').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Preferences')) {
        $('#itemPrefs').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Language')) {
        $('#itemLanguages').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Help')) {
        $('#itemHelp').appendTo($('#toolbarmorebutton'));
        }
    }))};

    try {
        var myMoreButtonInterval = setInterval("MoreButton()", 500)
    } catch (n) {
        console.log(n)
    }

如何使按钮一个接一个地保持，但div不会在屏幕上消失？

css left导致元素显示为嵌入式

0 个答案: