Question

我还在学习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>

我的问题是在我手动添加的每个父母的末尾：

<span> +</span>

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

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

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

Answer 1

您实际上可以通过向ul本身添加ul伪元素来避免检查子:before。 http://jsfiddle.net/tarabyte/8v9Bw/

CSS

/*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;
}

Answer 2

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

试试这个： JSFiddle

ul {
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}

ul li {
min-height: 0;
}

ul li.active {
min-height: 30px;
}

ul li:after {
content: "+";
float: right;
}

ul li.active:after {
content: '-';
}


<ul>
<li>Parent 1</li>
<li>Parent 2</li>
</ul>

$('li').click(function () {
$(this).toggleClass('active');
});

Answer 3

您需要使用toggleClass()功能。

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

JQuery的

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

CSS

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

.nclass:after{
    content: "-"
}

创建 fiddle

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

3 个答案: