jquery - 显示 :none; elements are hazy and floating right with bootstrap

Question

我这里有一个神秘的问题。

我正在使用名为 TreeMenu.js 的 javascript 来隐藏和显示 ul 列表。它通过在 display:none; 和 display:block; 之间切换来实现。

但是我还安装了 Bootstrap.css。不知何故，这使我的 ul 变得模糊并向右对齐。

如何防止这种情况发生？

这就是树状菜单的样子，我突出显示了 ul，其中子 li 被隐藏了:

突出显示的 ul 应向左对齐，其余为黑色。不是像这样漂浮和朦胧。 必须补充一点，该列表没有添加任何 bootstrap 类。

---

编辑:

代码如下:

CSS，而不是 Bootstrap

.menu ul{
margin:0px;
padding:0px;
text-decoration:none;
}
.menu li{
    margin:0px 0px 0px 5px;
    padding:0px;
    list-style-type:none;
    text-align:left;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:normal;
}
    .menu li li{
        margin:0px 0px 0px 16px;
    }

.menu .symbol-item,
.menu .symbol-open,
.menu .symbol-close
{
float:right;
width:16px;
height:1em;
background-position:left center;
background-repeat:no-repeat;
}
.menu .symbol-item  { background-image:url(../Icons/page.png); }
.menu .symbol-close { background-image:url(../Icons/plus.png);}
.menu .symbol-open  { background-image:url(../Icons/minus.png); }
.menu .symbol-item.last  { }
.menu .symbol-close.last { }
.menu .symbol-open.last  { }

.menu li.item  { font-weight:normal; }
.menu li.close { font-weight:normal; }
.menu li.open  { font-weight:bold; }
.menu li.item.last  { }
.menu li.close.last { }
.menu li.open.last  { }

a.go:link, a.go:visited, a.go:active
    {
    display:block;
    height:26px;
    width:100px;
    background-color:#FFFFFF;
    color:black;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    text-align:right;
    text-decoration:none;
    line-height:26px;
    padding-right:30px;
    background-image:url(go.gif);
    background-position:right;
    background-repeat:no-repeat;
    }
a.go:hover
    {
    text-decoration:none;
    color:black;
    }

.menu_move li {
list-style-type:none;
}
.menu_move li.item  { font-weight:normal; }
.menu_move li.close { font-weight:normal; }
.menu_move li.open  { font-weight:bold; }
.menu_move li.item.last  { }
.menu_move li.close.last { }
.menu_move li.open.last  { }
.menu_move .symbol-item,
.menu_move .symbol-open,
.menu_move .symbol-close
    {
    float:right;
    width:16px;
    height:1em;
    background-position:left center;
    background-repeat:no-repeat;
    }
.menu_move .symbol-item  { background-image:url(../Icons/page.png); }
.menu_move .symbol-close { background-image:url(../Icons/plus.png);}
.menu_move .symbol-open  { background-image:url(../Icons/minus.png); }
    .menu_move .symbol-item.last  { }
    .menu_move .symbol-close.last { }
    .menu_move .symbol-open.last  { }

TreeMenu.js

TreeMenu.SymbolTag = 'span';            // symbol inserted at beginning of <LI> tags

TreeMenu.OmitSymbols = false;           // don't insert symbol but do adjust them

TreeMenu.SymbolClassItem = 'glyphicon glyphicon-book pointer';              // No subfolders
TreeMenu.SymbolClassClose = 'glyphicon glyphicon-chevron-right pointer';    // Subfolders is hidden
TreeMenu.SymbolClassOpen = 'glyphicon glyphicon-chevron-down pointer';      // Subfolders is shown

TreeMenu.ClassItem  = 'item';           // class name added to <LI> tag's class
TreeMenu.ClassClose = 'close';          // class name added to <LI> tag's class
TreeMenu.ClassOpen  = 'open';           // class name added to <LI> tag's class
TreeMenu.ClassLast  = 'last';           // added to last <LI> and symbol tags' classes

TreeMenu.CookieSaveStates = true;       // flag to use a cookie to save menu state
TreeMenu.CookieExpire = 1;              // days before cookie saving menu states expires

TreeMenu.SetupMenu = true;          // scan document objects to initialize menu

TreeMenu.Singular = false;          // restrict open menus to only one per level

/////// End of Configuration Variables ///////////////////

function make_tree_menu(id,omit_symbols,no_save_state,singular,no_setup) {
var m = new TreeMenu(id);
if (omit_symbols) m.OmitSymbols = true;
if (no_save_state) m.CookieSaveStates = false;
if (singular) m.Singular = true;
if (no_setup) m.SetupMenu = false;
// Setup menus if we are inserting symbols or restoring menu open/close states.
if (m.SetupMenu) m.setup_symbols();
return m;
}

/*
 * TreeMenu
 */

function TreeMenu(ul_id) {          // object constructor

this.top_ul_id = ul_id;
this.top_ul = document.getElementById(ul_id);

this.configure();

// Register menu
TreeMenu.menus[ul_id] = this;

return this;
}

/*
 * TreeMenu Class Variables
 */

TreeMenu.menus = [];                // list of defined menus

/*
 * TreeMenu Class Methods
 */

TreeMenu.toggle = function(e) {
e = TreeMenu.get_ref(e);
var m = TreeMenu.menus[TreeMenu.get_top_ul(e).id];
var li = TreeMenu.get_li(e);
var ul = li.getElementsByTagName("UL")[0];
if (ul.style.display == "block") {
    m.hide_menu(ul, li, e);
}
else {
    if (m.Singular) m.hide_menus_except(li);
    m.show_menu(ul, li, e);
}

m.save_menu_states();
}

TreeMenu.show = function(ul) {
ul = TreeMenu.get_ref(ul);
var top_ul = TreeMenu.get_top_ul(ul);
if (! top_ul) return;
var m = TreeMenu.menus[top_ul.id];
var li = TreeMenu.get_li(ul);
m.show_menu(ul,li);
}

TreeMenu.hide = function(ul) {
ul = TreeMenu.get_ref(ul);
var top_ul = TreeMenu.get_top_ul(ul);
if (! top_ul) return;
var m = TreeMenu.menus[top_ul.id];
var li = TreeMenu.get_li(ul);
m.hide_menu(ul,li);
}

TreeMenu.show_all = function(ul) {
// Show all menus under ul.
ul = TreeMenu.get_ref(ul);
var uls = ul.getElementsByTagName("UL");
for (i = 0; i < uls.length; i++) {
    TreeMenu.show(uls[i]);
}
}

TreeMenu.hide_all = function(ul) {
// Hide all menus under ul.
ul = TreeMenu.get_ref(ul);
var uls = ul.getElementsByTagName("UL");
for (i = 0; i < uls.length; i++) {
    TreeMenu.hide(uls[i]);
}
}

TreeMenu.save_state = function(ul) {
// Reset menu to original settings.
ul = TreeMenu.get_ref(ul);
var m = TreeMenu.menus[TreeMenu.get_top_ul(ul).id];
m.save_menu_states();
}

TreeMenu.reset = function(ul) {
// Reset menu to original settings.
ul = TreeMenu.get_ref(ul);
var m = TreeMenu.menus[TreeMenu.get_top_ul(ul).id];
m.reset_menu_states();
}

// Private methods
TreeMenu.get_ref = function(id) {
    if (typeof id == "string") return document.getElementById(id);
return id;
}

TreeMenu.get_top_ul = function(e) {
while (e && (e.nodeName != 'UL' || ! e.id || ! TreeMenu.menus[e.id])) e = e.parentNode;
return e;
}

TreeMenu.get_li = function(e) {
while (e && e.nodeName != 'LI') e = e.parentNode;
return e;
}


/*
 * TreeMenu Object Methods
 */

TreeMenu.prototype.configure = function() {

    // Assign global class settings (capitalized variables) to object settings.

    var v,c;
    for (v in TreeMenu) {
            c = v.substr(0,1);
            if (c == c.toUpperCase()) {
                    this[v] = TreeMenu[v];
            }
    }
}

TreeMenu.prototype.setup_symbols = function() {

// Insert open/close symbols at the beginning of the menu items
// and open or close menus like they were previously.

var states = this.get_menu_states();

var index = 0;
var ul, li, symbol, islast = false;
var ul_elements, li_elements = this.top_ul.getElementsByTagName("LI");
for(var i=0; i < li_elements.length; i++) {
    li = li_elements[i];

    if (this.ClassLast) islast = this.is_last_item(li);

    ul_elements = li.getElementsByTagName("UL");
    if(ul_elements.length > 0) {
        // Submenus
        if (this.SymbolTag && ! this.OmitSymbols) {
            symbol = document.createElement(this.SymbolTag);
            if (this.ClassLast && islast) symbol.className = this.ClassLast;
            symbol.onclick = function() { TreeMenu.toggle(this); };
            li.insertBefore(symbol, li.firstChild);
        }

        ul = ul_elements[0];
        if (states[index] == '1') this.show_menu(ul,li);
        else                      this.hide_menu(ul,li);
        index++;
    }
    else {
        // Menu item
        if (this.SymbolTag && ! this.OmitSymbols) {
            symbol = document.createElement(this.SymbolTag);
            if (this.SymbolClassItem)
                symbol.className = this.SymbolClassItem;
            if (this.SymbolSrcItem)
                symbol.src = this.SymbolSrcItem;
            if (this.ClassLast && islast)
                symbol.className += ' ' + this.ClassLast;
            li.insertBefore(symbol, li.firstChild);
        }

        if (this.ClassItem) li.className += ' ' + this.ClassItem;
    }

    if (islast) li.className += ' ' + this.ClassLast;
}
}

TreeMenu.prototype.is_last_item = function(e) {
// Check if element is the last LI element in the list.
e = e.nextSibling;
// Get next element (Mozilla puts text nodes at same level here).
while (e && e.nodeType != 1) e = e.nextSibling;
return e ? false : true;
}

TreeMenu.prototype.get_menu_states = function() {
var cookie = getCookie("tm_" + this.top_ul_id);
if (cookie) return cookie.split('x');
return [];
}

TreeMenu.prototype.save_menu_states = function() {

// Save all menu and submenu open/close states in a cookie

if (! this.CookieSaveStates) return;

var states = [];
var ul_elements, li_elements = this.top_ul.getElementsByTagName("LI");
for(var i=0; i < li_elements.length; i++) {
    ul_elements = li_elements[i].getElementsByTagName("UL");
    if (ul_elements.length > 0) {
        states[states.length] = ul_elements[0].style.display == "block" ? 1 : 0;
    }
}

var expire_date = new Date((new Date().getTime()) + this.CookieExpire*24*60*60*1000);
setCookie("tm_" + this.top_ul_id, states.join('x'), expire_date, '/');
}

TreeMenu.prototype.reset_menu_states = function() {

// Reset all menu and submenu open/close states  (delete cookie)

var expire_date = new Date((new Date().getTime()) - 1000);      // set to past time
setCookie("tm_" + this.top_ul_id, '', expire_date, '/');
}

TreeMenu.prototype.add_remove_class = function(e,add_class,remove_class) {
if (e) {
    if (remove_class)
        e.className = e.className.replace(remove_class,'');
    if (add_class && ! e.className.match( (new RegExp("\\b"+add_class+"(\\s.*)?")) ) ) {
        e.className += ' ' + add_class;
    }
}
}

TreeMenu.prototype.show_menu = function(ul,li,e) {
ul.style.display = 'block';

this.add_remove_class(li,this.ClassOpen,this.ClassClose);

if (this.SymbolTag) {
    var symbol = li.getElementsByTagName(this.SymbolTag)[0];
    this.add_remove_class(symbol,this.SymbolClassOpen,this.SymbolClassClose);
    if (this.SymbolSrcOpen) symbol.src = this.SymbolSrcOpen;
}

// Following case is for toggle buttons disassociated with menu structure.
this.add_remove_class(e,this.SymbolClassOpen,this.SymbolClassClose);
}

TreeMenu.prototype.hide_menu = function(ul,li,e) {
ul.style.display = 'none';

this.add_remove_class(li,this.ClassClose,this.ClassOpen);

if (this.SymbolTag) {
    var symbol = li.getElementsByTagName(this.SymbolTag)[0];
    this.add_remove_class(symbol,this.SymbolClassClose,this.SymbolClassOpen);
    if (this.SymbolSrcClose) symbol.src = this.SymbolSrcClose;
}

// Following case is for toggle buttons disassociated with menu structure.
this.add_remove_class(e,this.SymbolClassClose,this.SymbolClassOpen);
}

TreeMenu.prototype.hide_menus_except = function(li) {
// Hide other menus at same level as li.
var n;
var re = new RegExp('\\b' + this.ClassOpen + '\\b');
for (var i = 0; i < li.parentNode.childNodes.length; i++) {
    n = li.parentNode.childNodes[i];
    if (n == li || n.nodeType != 1) continue;
    if (n.className.match(re)) this.hide_menu(n.getElementsByTagName("UL")[0],n);
}
}

以及生成列表的代码

@helper tree(int parentId, List<Subjects> subjects)
{
foreach (var s in subjects)
{
    if (s.subfolderTo == parentId)
    {
        <li>
            <a href="/Chapter/Read?chapterId=@s._id&noteId=0">@s.subject</a>

            @{
                if (Subjects.GotSubFolder(s._id, subjects))
                {
                    <ul>
                        @tree(s._id, subjects)
                    </ul>
                }
            }
        </li>
    }
}
}

<div id="Menu_Overview">
@message
<div class="menu">
    <ul id="menu_id">
        @tree(0, subjects)
    </ul>
    <script type="text/javascript">make_tree_menu("menu_id")</script>
</div>
</div>

Answer 1

只是为了关闭这个。

在浏览器中使用开发人员工具后，我发现类 .close添加到 mu ul 的位置s，也是Bootstrap中的一个类.

.close已添加类(class) float:right;和 opacity:0.2;这使得对齐错误并且文本模糊。