Question

我在我的页面中使用Jquery Accordian，这是HTML，

<div class="forms-cont">
    <h5>
        Accordian Examples</h5>
    <div class="accordian">
        <div>
            <h2 class="sch-hdr">
                Header One</h2>
            <div class="sch-cont levelOne">
                <p>
                    this is a title text - level one</p>
            </div>
        </div>
        <div class="">
            <h2 class="sch-hdr">
                Header Two</h2>
            <div class="sch-cont levelOne">
                <p>
                    This is another title text - level one
                </p>
                <div class="martop10">
                    <h3 class="subgr-hdr">
                        Staff</h3>
                    <div class="sch-cont levelTwo">
                        <p>
                            This is an inner text
                        </p>
                    </div>
                </div>
                <div class="">
                    <h3 class="subgr-hdr">
                        Manager</h3>
                    <div class="sch-cont levelTwo">
                        <p>
                            This is an inner text
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在这里，我需要附加一个锚标签，让手风琴工作，这是我的jquery，

 $(document).ready(function() { 

    // Accordian Main 
    $('.accordion h2, .accordion h3').addClass('closed'); 
    $('.levelOne,.levelTwo').hide(); 
    $('.accordion h2, .accordion h3').each(function () { 
            $(this).html(function() { 
            var headertext = '<a href="#">' + $(this).html() + '</a>'; 
            return headertext; 
        }); 
    }); 

    // Level 1 Accordian 
    $(".accordion h2 a").click(function() { 
        alert('hi');
            $(this).next(".levelOne").slideToggle("slow"); 
            $(this).toggleClass("closed"); 
            return false; 
    }); 
    // Level 2 Accordian 
    $('.accordion h3 a').click(function() { 
            $(this).parent().next(".levelTwo").slideToggle("slow"); 
            $(this).parent().toggleClass("closed"); 
            return false; 
    }); 
  });

但是我无法在H2和H3中追加锚。有什么帮助吗？

Answer 1

在代码的这一部分中，this引用函数本身而不是对象：

$('.accordion h2, .accordion h3').each(function () { 
        $(this).html(function() { 
        var headertext = '<a href="#">' + $(this).html() + '</a>';   // <-- HERE
        return headertext; 
    }); 
});

改为：

$('.accordion h2, .accordion h3').each(function () { 
        var that = this;
        $(this).html(function() { 
        var headertext = '<a href="#">' + $(that).html() + '</a>'; 
        return headertext; 
    }); 
});

这是展示它的JSFIDDLE

Answer 2

看起来你拼错了手风琴：

将其更改为：

$('.accordian h2, .accordian h3').each(function () { 
            $(this).html(function() { 
            var headertext = '<a href="#">' + $(this).html() + '</a>'; 
            return headertext; 
        }); 
    });

请参阅js fiddle here http://jsfiddle.net/HukJE/4

Answer 3

编辑：对不起，如果是wrap（），那就是wrapInner（）。

三件事：

1）您不需要.each（），只需：

$('.accordion h2, .accordion h3').wrapInner('<a href="#"></a>');

2）你的html中有一个拼写错误：

<div class="accordian">  <-- accordion?

3）“h2 a”点击事件中缺少“parent（）”：

$(".accordion h2 a").click(function() { 
        $(this).next(".levelOne").slideToggle("slow"); <-- actual

$(".accordion h2 a").click(function() { 
        $(this).parent().next(".levelOne").slideToggle("slow"); <-- with parent()

然后它会起作用：）

jsFiddle：http://jsfiddle.net/fy2uM/2

追加<a> using Jquery</a>

3 个答案: