-1

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>
4

2 回答 2

5

我很佩服你的自信：你的代码不起作用，所以你认为问题出在 jQuery 上。

在您的代码中，此语句：

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

...将点击处理程序绑定到当时没有"faded"该类的任何元素。这将是所有元素，因为最初没有褪色。如果您希望它仅适用于以后没有添加该类的元素，您需要使用您通过分配的委托处理程序（或者如果使用早于 1.7 的 jQuery，或者如果使用可笑的旧 jQuery）：.on().delegate().live()

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

理想情况下，您不会将处理程序绑定到document，您将使用相关段落的最接近的祖先，但由于您没有显示太多标记，我将把这部分留给您。

但是，您还可以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

于 2012-11-09T22:42:16.403 回答
0

我永远不会使用 jQuery 将样式应用于代码，但简单的添加和删除类......

它会变得混乱，有时我们可以简化而不是复杂化。

这是一个简单的例子：http: //jsbin.com/amiloc/1/

相同，但没有<li>'s：http: //jsbin.com/amiloc/3/

添加了颜色，因此我们知道“引擎盖下”发生了什么，让您自己判断。

于 2012-11-09T22:55:31.163 回答