Question

我有一些问题和答案，我希望当用户点击问题编号4，答案编号4淡入然后如果用户点击问题编号5，答案编号4淡出然后答案编号5淡入等等。 .. 我用一个段落完成了这个。但我不能用多个段落来做。这是我的代码：

$("#content").ready(function(){
    $('p').css({display:'none'});
    $('a:first').click(function(){
        $( 'p:first' ).fadeToggle( "slow", "linear" );
});    
});

http://jsfiddle.net/mr_seven/kLxsS/

请帮助我感谢

我使用joomla，现在我有另一个问题：在文本编辑器中，当我写文本时，joomla自动广告＆lt; p>标签。现在代码没有用。这是保存文章后发生的事情：

<div id="content" class="faq">
    <p><a>question 1 ?</a></p>
    <p>answer 1</p>
    <p><a>question 2 ?</a></p>
    <p>answer 2 </p>
    <p><a>question 3 ?</a></p>
    <p>answer 3</p>
</div>

Answer 1

编辑：只是看到它不是你想要的......

可能是一个解决方案：

DEMO jsFiddle

$(function () {
    $('#content p').hide();
    $('#content a').click(function () { 
        $(this).nextAll('p:first').fadeToggle("slow", "linear");
    });
});

另一个是根据索引来定位元素：

$('a').click(function () {
        $('p').eq($(this).index('a')).fadeToggle("slow", "linear")
    });

Answer 2

使用data-rel属性：

$("#content").ready(function () {
$('p').css({
    display: 'none'
});

$('a').click(function () {
    $('p[data-rel='+
    $(this).attr('data-rel')+']').fadeToggle("slow", "linear")
});
});

这里有一个小提琴http://jsfiddle.net/btordz/kLxsS/1/

Answer 3

因为你也想要已经打开fadeOut的答案，我为你设置了一个JSFiddle就是这样做的。看看：http://jsfiddle.net/kLxsS/6/

$(document).ready(function(){
    $('a').click(function(){
        $('.active').fadeToggle( "slow", "linear" ).removeClass('active');
        $(this).parent().find('p').fadeToggle( "slow", "linear" ).addClass('active');
    });    
});

这样，活动答案会获得另一个类（活动），因此您甚至可以将其设置为与其他类不同。

编辑：我在这里做了另一个编辑：http://jsfiddle.net/kLxsS/9/ 现在当你点击一个锚时，它会在答案中消失，当你再次点击同一个时，它会淡出答案。但是，当你点击另一个锚时，虽然已经有一个答案打开，但它会淡出打开的答案，并在新点击的答案中淡出。

使用jquery创建段落fadetoggle

3 个答案: