2013-02-04 45 views
0

花費一點時間讓+變爲 - 在slideToggle動作中使用以下代碼。slideToggle附加文本交換

jQuery('.mean-nav ul ul').show(); 
if(meanToggleChildren){ 
    jQuery('.mean-nav ul ul').hide(); 
    if(jQuery('.mean-nav ul ul').length){ 
     jQuery('<span class="mm-open-close">+</span>').insertBefore(jQuery('.mean-nav ul ul')); 
     jQuery('.mean-nav ul li').click(function(){ 
      jQuery(this).find('ul').slideToggle('fast', function(){ 
       $('.mm-open-close').text().toLowerCase().indexOf('-') != -1 ? $('.mm-open-close').text('+') : $('.mm-open-close').text('-'); 
      }); 
     }); 
    } 
} 

它是在正確的位置插入+,然而,互換不會出現正常工作,(每以下HTML),因爲它交換兩者+

這是使用jQuery 1.7 0.1圖書館,meanMenu響應導航插件,和下面的HTML:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
/* hide the link until viewport size is reached */ 
a.meanmenu-reveal { 
display: none; 
} 

/* when under viewport size, .mean-container is added to body */ 
.mean-container .mean-bar { 
float: left; 
width: 100%; 
position: relative; 
background: #0c1923; 
padding: 4px 0; 
min-height: 33px; 
z-index:9000; 
} 
.mean-container a.meanmenu-reveal { 
width: 22px; 
height: 22px; 
padding: 10px 10px 8px 10px; 
position: absolute; 
top: 0; 
right: 0; 
cursor: pointer; 
color: #fff; 
text-decoration: none; 
font-size: 16px; 
text-indent: -9999em; 
line-height: 22px; 
font-size: 1px; 
display: block; 
font-family: Arial, Helvetica, sans-serif; 
font-weight: 700; 
} 
.mean-container a.meanmenu-reveal span { 
display: block; 
background: #fff; 
height: 3px; 
margin-top: 3px; 
} 
.mean-container .mean-nav { 
float: left; 
width: 100%; 
background: #0c1923; 
margin-top: 33px; 
} 
.mean-container .mean-nav ul { 
width: 100%; 
} 
.mean-container .mean-nav ul li a { 
display: block; 
float: left; 
width: 90%; 
padding: .5em 5%; 
margin: 0; 
text-align: left; 
color: #fff; 
border-top: 1px solid #383838; 
border-top: 1px solid rgba(255,255,255,0.5); 
text-decoration: none; 
text-transform: uppercase; 
} 
.mean-container .mean-nav ul li:first-child a { 
border: none; 
} 
.mean-container .mean-nav ul li li a { 
width: 80%; 
padding: .5em 10%; 
border-top: 1px solid #f1f1f1; 
border-top: 1px solid rgba(255,255,255,0.25); 
opacity: 0.75; 
filter: alpha(opacity=75); 
text-shadow: none !important; 
visibility: visible; 
} 
.mean-container .mean-nav ul li li li a { 
width: 70%; 
padding: .5em 15%; 
} 
.mean-container .mean-nav ul li li:first-child a { 
border-top: 1px solid #f1f1f1; 
border-top: 1px solid rgba(255,255,255,0.25); 
} 
.mean-container .mean-nav ul li a:hover { 
background: #252525; 
background: rgba(255,255,255,0.1); 
} 
.mean-container .mean-push { 
float: left; 
width: 100%; 
padding: 0; 
margin: 0; 
clear: both; 
} 
.mm-open-close{color:#fff;float:left;} 
</style> 
</head> 
<body> 
<header> 
<nav> 
    <ul> 
     <li><a>Test</a></li> 
     <li><a>Test</a></li> 
     <li><a>Test</a> 
      <ul> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
      </ul> 
     </li> 
     <li><a>Test</a>   <ul> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
       <li><a>Test</a></li> 
      </ul> 
     </li> 

     <li><a>Test</a></li> 
     <li><a>Test</a></li> 
    </ul> 
</nav> 
</header> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
<script type="text/javascript" src="/mean.menu.js"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     $('header nav').meanmenu({ 
      meanScreenWidth:  800, 
      meanRevealPosition:  "left", 
      meanShowChildren:  true, 
      meanToggleChildren:  true 
     }); 
    }); 
</script> 
</body> 
</html> 

我怎樣才能獲得+交換到 - 當正確的段切換?

回答

0

發現並修復它:

if(meanShowChildren) { 
    if(meanToggleChildren){ 
     //check to make sure that there are children first off... 
     if(jQuery('.mean-nav ul ul').length){ 
      jQuery('.mean-nav ul ul').prev().prepend('<span class="mm-open-close">+</span>');        
      jQuery('.mean-nav ul li').click(function(){ 
       jQuery(this).find('ul').slideToggle('fast', function(){ 
        var tObj = jQuery(this).prev().find('.mm-open-close'); 
        tObj.text().toLowerCase().indexOf('-') != -1 ? tObj.text('+') : tObj.text('-'); 
       }); 
      });        
     } 
    } else { 
     jQuery('.mean-nav ul ul').show(); 
    } 
} else { 
    jQuery('.mean-nav ul ul').hide(); 
} 
1

這是我做到了在插件本身(新版本今日發佈https://github.com/weare2ndfloor/meanMenu)。

// hide sub nav 
        if(meanShowChildren) { 
         // allow expandable sub nav(s) 
         if(meanExpandableChildren){ 
          jQuery('.mean-nav ul ul').each(function() { 
           if(jQuery(this).children().length){ 
            jQuery(this,'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>');        
           } 
          }); 
          jQuery('.mean-expand').on("click",function(e){ 
           e.preventDefault(); 
           if (jQuery(this).hasClass("mean-clicked")) { 
            jQuery(this).text(meanExpand); 
            console.log("Been clicked"); 
            jQuery(this).prev('ul').slideUp(300, function(){ 

            }); 
           } else { 
            jQuery(this).text(meanContract); 
            jQuery(this).prev('ul').slideDown(300, function(){ 
            }); 
           } 
           jQuery(this).toggleClass("mean-clicked"); 
          });  
         } else { 
          jQuery('.mean-nav ul ul').show(); 
         } 
        } else { 
         jQuery('.mean-nav ul ul').hide(); 
        } 

顯然,我的函數名稱是不同的。與你的主要區別是隻有+是可點擊的。

雖然您需要從上面的鏈接中獲取新的CSS和插件。