-1

我有一个标题和一个无序列表

<h2> here is some interesting links </h2>
 <ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

我喜欢的是在标签末尾添加一个 [+]，并隐藏以下内容

    然后点击h2，显示它....但我需要让[+]变成[-]

    改变它的最好方法是什么？

    它看起来像：

    关闭：标题 [+]

    打开：标题 [-]

  • -link1
  • -链接2
  • -链接3
4

4 回答 4

2

这是我的快速即兴创作。它应该工作。

HTML：

<h2>
    here is some interesting links
    <span class="toggle" data-target="list1">-</span>
</h2>
<ul id="list1">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

jQuery：

$(".toggle").on("click", function() {
    var target = $(this).text(function(i, val) {
        return val == "+" ? "-" : "+";
    }).data("target");
    $("#" + target).toggle();
});

演示：http: //jsfiddle.net/L3jep/

于 2012-08-20T18:49:22.260 回答
2

假设您当前的 HTML 没有更改，并且所有修改都通过 jQuery：

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(){
                return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JS 小提琴演示。

编辑以解释上述代码的这一部分：

 return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';

这是一个三元运算符，它评估条件 ( return that.text().indexOf('+') !== -1) 为真或假。后面是?“if-true”响应，后面:是“if-false”响应。

因此，条件评估是否在从当前元素+返回的字符串中找到该字符。text()我们将结果与-1因为indexOf()返回找到的子字符串的索引进行比较。因为子字符串可以在0（字符串的开头）找到，所以在找不到字符串时indexOf()返回-1。因此，如果在元素的文本+中找到 （因此返回的结果将不等于-1），则span文本将更改为[-]，而如果+ 找到，则将文本更改为[-]。

该return语句只是将更改后的文本返回给text()方法。

更新以修改text()方法的功能，并利用元素的文本可用作函数中的第二个参数这一事实：

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(i,t){
                return t.indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JS 小提琴演示。

参考：

于 2012-08-20T18:52:24.887 回答
1

假设你有这样的标记

<h2> here is some interesting links </h2>
<a  class="aExpand" href="#">+</a>
 <ul class="sub" style="display:none;">
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

这个脚本会做

$(function(){
     $(".aExpand").click(function(e){
       var item=$(this);  
        if(item.next("ul").is(":visible"))
        {         
          item.text("+").next("ul").hide();

        }
        else
        {           
            item.text("-").next("ul").show();
        }

    });    
});

工作样本：http: //jsfiddle.net/BqKn5/8/

于 2012-08-20T18:52:40.400 回答
0

我的最终代码基于您的帮助并从这里开始：如何在 JavaScript 中进行字符串替换以将 '9.61' 转换为 '9:61'？

<script type="text/javascript">
$(function(){

    $('.bulletlisttohide').hide();

    $(".plus").click( function () {
        $(this).next('.bulletlisttohide').slideToggle(500, function (){
            if ($(this).is(":visible")) { $(this).prev('.plus').html(function(i, val) { return val.replace('[+]', '[-]'); }); }
            else { $(this).prev('.plus').html(function(i, val) { return val.replace('[-]', '[+]'); }); }
        });

        return false;
    });
})
</script>
于 2012-08-21T01:40:21.940 回答