jQuery代码行为错误

Question

jQuery没有按照它应该的方式工作,完全忽略了逻辑.

如果我单击一个链接,它会显示给定的描述,并淡化其他菜单.
如果我再次单击相同的链接,它应该隐藏该描述,并淡化其他链接.

但它只是隐藏文本,并且不会淡化它们.
当从控制台单独运行代码时,当您单击段落旁边的空白时,它可以正常工作.

网站供参考

jQuery的:

    $('a[class]').click(function(){
    var clas = $(this).attr('class');
        $('#'+clas.substring(0,2)).fadeTo('fast',1).removeClass('faded');
        $('p:not(#'+clas.substring(0,2)+')').fadeTo('fast',0.3);
        $('.ans:visible').toggle('slow');
        $('#'+clas.substring(0,2)+'a'+':hidden').fadeIn('slow');
        $('p:not(#'+clas.substring(0,2)+')').addClass('faded');
        return false;
    });
    $('p:not(p.faded)').click(function(){
        $('.ans:visible').toggle('slow');
        $('p[class="faded"]').fadeTo('fast',1).removeClass('faded');
    });

HTML:

    <p id="q1">1. <a class="q1">Nem látom a kedvenc karakterem, hozzá tudod adni?</a>
    <br>
    <span id="q1a" style="display:none;" class="ans">
        Persze. Írj egy e-mail-t a <a href="mailto:djdavid98+mlptoday@gmail.com?subject=MLP Today Karakterkérés" target="_blank">djdavid98@gmail.com</a> címre a karakter nevével.
        <br>
        <span style="color:red">OC-kat és fillyket NEM adok hozzá.</span>
    </span>
    </p>

    <p id="q2">2. <a class="q2">Hogyan tudok karaktert választani?</a>
    <br>
    <span id="q2a" style="display:none;" class="ans">
        Látogass el a <a href="../../img/?from=faq_hu">Karakterválasztás</a> oldalra, ahol kiválaszthatod a kedvenced.
        <br>
        Haználhatod továbbá a "<i>Véletlenszer? karakter</i>" linket is.
    </span>
    </p>

    <p id="q3">3. <a class="q3">Mi ennek az oldalnak a célja/alapötlete?</a>
    <br>
    <span id="q3a" style="display:none;" class="ans">
        Eredetileg a <a href="http://milyennapvanma.hu/" target="_blank">milyennapvanma.hu</a> weboldal pónisított változataként indult,
        <br>
        de azóta már nagy mértékben továbbfejl?dött az oldal.
    </span>
    </p>

Answer 1

我很佩服你的自信:你的代码不起作用所以你认为问题在于jQuery.

在您的代码中,此声明:

$('p:not(p.faded)').click(function(){

...结合一个单击处理程序没有任何的元素"faded"类的那一刻.这将是所有元素,因为最初没有褪色.如果您希望它仅应用于以后没有添加该类的元素,则需要使用您通过分配的委托处理程序.on()(或者.delegate()如果使用早于1.7的jQuery,或者.live()如果使用一个荒谬的旧jQuery):

$(document).on('click', 'p:not(p.faded)'), function() {

理想情况下,您不会将处理程序绑定到document,您将使用相关段落中最接近的anscestor,但由于您没有显示那么多标记,我会将该部分留给您.

另外,您return false;可以通过锚元素上的单击处理程序来阻止单击事件传播到段落.

但是,我认为你使整个事情变得比你需要的更复杂.以下代码完成了工作:

var $questions = $('p'); // add class selectors here

$questions.click(function(){
   var $this = $(this),
       isOpen = $this.hasClass('open');

   $this.fadeTo('fast',1).toggleClass('open',!isOpen)
        .find('span.ans').toggle('slow');
   $questions.not(this).fadeTo('fast', isOpen ? 1 : 0.2)
                       .removeClass('open')
                       .find('span.ans').hide('slow');
});

也就是说,当点击任何段落时,弄清楚它是否已经打开了答案.然后确保单击的一个可见,并切换其答案.然后取出所有兄弟段落,并在适当的时候淡入或淡出它们并隐藏它们的答案.

我把评论"在这里添加类选择器"放在哪里,最好添加一个类来识别文档中哪些段落是问题.

演示:http://jsfiddle.net/DxFDP/2