Jquery 滑动切换附加文本交换_Jquery_Jquery Plugins

Jquery 滑动切换附加文本交换

jquery jquery-plugins

Jquery 滑动切换附加文本交换,jquery,jquery-plugins,Jquery,Jquery Plugins,花了一点时间让+变为-并在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>').insertBefor

花了一点时间让+变为-并在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('-');
            });
        });
    }
}

jQuery（'.mean nav ul'）.show（）；
if（指切换儿童）{
jQuery（'.mean nav ul'）.hide（）；
if（jQuery（'.平均导航ul'）.长度）{
jQuery（'+'）.insertBefore（jQuery（'.mean nav ul'））；
jQuery（'.mean nav ul li'）。单击（函数（）{
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.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>


无标题文件
/*隐藏链接，直到达到视口大小*/
a、 菜单显示{
显示：无；
}
/*在“视口大小”下，将向主体添加.mean容器*/
.平均容器.平均棒{
浮动：左；
宽度：100%；
位置：相对位置；
背景：#0c1923；
填充：4px0；
最小高度：33px；
z指数：9000；
}
.平均容器a.平均菜单-显示{
宽度：22px；
高度：22px；
填充：10px 10px 8px 10px；
位置：绝对位置；
排名：0；
右：0；
光标：指针；
颜色：#fff；
文字装饰：无；
字体大小：16px；
文本缩进：-9999em；
线高：22px；
字号：1px；
显示：块；
字体系列：Arial、Helvetica、无衬线字体；
字号：700；
}
.平均容器a.平均菜单显示跨度{
显示：块；
背景：#fff；
高度：3倍；
利润上限：3倍；
}
.平均容器.平均导航{
浮动：左；
宽度：100%；
背景：#0c1923；
边缘顶端：33像素；
}
.平均集装箱.平均导航ul{
宽度：100%；
}
.平均集装箱.平均导航ul li a{
显示：块；
浮动：左；
宽度：90%；
填充：.5em5%；
保证金：0；
文本对齐：左对齐；
颜色：#fff；
边框顶部：1px实心#3838；
边框顶部：1px实心rgba（255255,0.5）；
文字装饰：无；
文本转换：大写；
}
.平均容器.平均导航ul li:第一个孩子a{
边界：无；
}
.平均集装箱.平均导航ul li a{
宽度：80%；
填充：.5em 10%；
边框顶部：1px实心#f1f1；
边框顶部：1px实心rgba（255255,0.25）；
不透明度：0.75；
过滤器：α（不透明度=75）；
文本阴影：无！重要；
能见度：可见；
}
.平均集装箱.平均导航ul li a{
宽度：70%；
填充：.5em 15%；
}
中庸的容器中庸的海军ul li li:第一个孩子a{
边框顶部：1px实心#f1f1；
边框顶部：1px实心rgba（255255,0.25）；
}
.平均容器.平均导航李a:悬停{
背景：252525；
背景：rgba（255255,0.1）；
}
.平均容器.平均推力{
浮动：左；
宽度：100%；
填充：0；
保证金：0；
明确：两者皆有；
}
.mm开闭{color:#fff；float:left；}

试验
试验
试验

试验
试验
试验
试验
试验


测试
试验
试验
试验
试验
试验


试验
试验

jQuery（文档）.ready（函数（$）{
$（'header nav'）.means菜单({
平均屏幕宽度：800，
平均位置：“左”，
孩子们：是的，
孩子们：真的吗
});
});

切换分区时，如何正确地将+切换到-？

找到并修复了它：

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();
}

if（平均显示子项）{
if（指切换儿童）{
//检查以确保首先有孩子。。。
if（jQuery（'.平均导航ul'）.长度）{
jQuery（'.mean nav ul'）.prev（）.prepend（'+'）；
jQuery（'.mean nav ul li'）。单击（函数（）{
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（'-'）；
});
});                             
}
}否则{
jQuery（'.mean nav ul'）.show（）；
}
}否则{
jQuery（'.mean nav ul'）.hide（）；
}

这就是我在插件本身（今天发布的新版本）中所做的

//隐藏子导航
如果（指儿童）{
//允许扩展子导航
if（可扩展儿童）{
jQuery（'.mean nav ul'）。每个（函数（）{
if（jQuery（this.children（）.length）{
jQuery（this，'li:first'）.parent（）.append（“”）；
}
});
jQuery（'.mean expand'）。打开（“单击”，函数（e）{
e、 预防默认值（）；
if（jQuery（this）.hasClass（“单击平均值”））{
jQuery（this）.text（meansexpand）；
console.log（“被点击”）；
jQuery（this）.prev（'ul'）.slideUp（300，function（）{
});
}否则{
jQuery（this）.text（合同）；
jQuery（this）.prev（'ul'）.slideDown（300，function（）{
});
}   
jQuery（this）.toggleClass（“单击平均值”）；
});     
}否则{
jQuery（'.mean nav ul'）.show（）；
// 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();
                   }