自动添加文本的最佳jQuery方法_Jquery_Css

自动添加文本的最佳jQuery方法

jquery css

自动添加文本的最佳jQuery方法,jquery,css,Jquery,Css,我还在学习jQuery，一直在做一些练习。我有以下工作： <!DOCTYPE HTML> <html> <head> <title>New Site</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <ul class="accmenu">

我还在学习jQuery，一直在做一些练习。我有以下工作：

<!DOCTYPE HTML>
<html>
<head>
<title>New Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>    
<body>    
<ul class="accmenu">
  <li><a href="#">Item 1</a><span> +</span>
<ul>
      <li><a href="#">Item 1 a</a></li>
      <li><a href="#">item 1 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a><span> +</span>
<ul>
      <li><a href="#">Item 3a</a></li>
      <li><a href="#">Item 3b</a></li>
      <li><a href="#">item 3c</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">

$(".accmenu li ul").hide();
$( document ).ready(function() {

$(".accmenu li").toggle(function(){
//    $(".accmenu li ul").slideDown();
    $(this).children("ul").slideDown(); 
    $(this).children("span").html( " -" );
},function(){
//    $(".accmenu li ul").slideUp();
    $(this).children("ul").slideUp();   
    $(this).children("span").html( " +" );  
});

});    
</script>    
</body>
</html>


新址

+






+








$（“.accli ul”）.hide（）；
$（文档）.ready（函数（）{
$（“.accli”）.toggle（函数（）{
//$（“.accli ul”）.slideDown（）；
$（this.children（“ul”）.slideDown（）；
$（此）.children（“span”）.html（“-”）；
}，函数（）{
//$（“.accli ul”）.slideUp（）；
$（this.children（“ul”）.slideUp（）；
$（this.children（“span”）.html（“+”）；
});
});

我的问题是，在我手动添加的每个家长的末尾：

<span> +</span>

是否有一种可编程的方法来实现这一点，以及相应的-通过jQuery自动发生？没有将实际跨度写入代码

基本上，我希望jQuery找到每个li下都有ul，并在li的文本末尾添加“+”或“-”，这取决于它是否折叠

我考虑了jQuery追加的可能性，但我不想继续添加…基本上我希望+/-自动发生，并在菜单上下滑动时切换。

基本上，使用CSS添加加号，使用Javascript切换类

试试这个：

ul{
宽度：200px；
填充：0；
保证金：0；
列表样式：无；
}
ulli{
最小高度：0；
}
ulli.active{
最小高度：30px；
}
ul li：之后{
内容：“+”；
浮动：对；
}
ul li.主动：之后{
内容:'一';；
}

父1
家长2

$（'li'）。单击（函数（）{
$（this.toggleClass（'active'）；
});

您需要使用

toggleClass（）

函数

请在代码中添加以下内容：

JQuery

$('a').click(function(){debugger;
$(this).toggleClass("pclass nclass" )
});

CSS

创建

您实际上可以通过将

:before

伪元素添加到ul本身来避免检查子

ul

CSS

虽然您没有标记CSS，但这是一个很好的机会，可以使用jQuery切换类，并为每个类提供不同的文本

内容

。另外，toggle（）事件在1.8之后从jQuery中删除。我现在已经标记了CSS。一旦我对如何处理+/-有了更好的理解，我将进行重写以删除。切换…谢谢提醒！

toggle

实际上是一个事件。我认为这只是一个在后台触发Capture

onclick

的函数。如果你不想学习任何东西（除了如何使用jQueryUI），你可以看看插件。你不应该测试父母是否有孩子吗？是的。。如果你不想看到多个元素，那么你也应该添加一个测试来查看其他元素是否被扩展和折叠，但这只是为了展示他如何添加+/-符号而不必添加实际的HTML内容。我已经使用了到目前为止发布的内容，我认为这种方法最适合我的最终目标。谢谢

$('a').click(function(){debugger;
$(this).toggleClass("pclass nclass" )
});

.pclass:after{
    content: "+";
} 

.nclass:after{
    content: "-"
}

/*hide content and disc*/
.accmenu > li {
    overflow: hidden;
    list-style-type: none;
}

/*moves +/- to the left of the link*/
.accmenu > li > a {
    overflow: hidden;
    float: left;
}

/*closed menu item*/
.accmenu > li > ul:before {
    content: '+';
}

/*opened menu item*/    
.accmenu > li.active > ul:before {
    content: '\2013';
}

/*height animation effect !requires prefixes and modern browsers.*/    
.accmenu > li > ul {    
    max-height: 0;
    transition: max-height 0.5s ease-out;
}

.accmenu > li.active > ul {    
    max-height: 100px;
}