Question

我正在尝试实现这样的效果：当您单击新项目时，之前单击的项目为fadeOut。但是当你点击两次相同的项目时，它再次淡入，我希望它不会淡入两次。

因为我还在学习JS，所以你还可以为我的工作原理和为实现它而需要做的事情添加推理，这样我就能自学更好了：）

我可以加载代码输入模块，所以这里是代码：

jQuery(document).ready(function() {
jQuery(".qs").click(function() {
jQuery(".qs").siblings(".ans").fadeOut(600).not(jQuery(this));
  jQuery(this).siblings(".ans").fadeIn(600);
});
});

<table class="faqs" style="width:100%">
  <tr>
    <td class="qs"><span>1. How does LenDen Work?</span></td>
    <td class="ans">This is an example Answer with more Length testing.</td>
  </tr>
  <tr>
    <td class="qs"><span>2. Different modes of transaction?</span></td>
    <td class="ans">Answer</td>
  </tr>
</table>

感谢您的帮助。

亚历

Answer 1

如果我理解你的问题，这可能只是解决你的问题：

 jQuery(document).ready(function() {
    jQuery(".qs").click(function() {

    if(jQuery(this).hasClass("selected")){
        return;
    }
    jQuery(".qs").siblings(".ans").fadeOut();
    jQuery(this).siblings(".ans").fadeIn();
    jQuery(".qs").removeClass("selected");
    jQuery(this).addClass("selected");


    });
    });

您还需要css：

<style>
.active .units { display:block }
.ans {display: none}
.selected{}
</style>

当然，有更好的方法可以做到这一点。

Answer 2

我不太了解你的问题，它总是会只显示一个答案吗？

点击2隐藏答案1并显示答案2，

点击1隐藏答案2并显示答案1？

$(document).ready(function() {
    $('#location').on('change', function(){
        reset();
    });
    function reset(){
     $("#wing").val("");
     $("#post").val("");
    }

    $(".qs").click(function() {
        var others = $(".qs").not($(this)).siblings(".ans");
        others.fadeOut(600);
        $(this).siblings(".ans").fadeIn(600);
    });

});

Answer 3

如果我理解你的问题，你期望下面提供的那种行为：

jQuery(document).ready(function() {
    jQuery(".qs").click(function() {
        jQuery(".qs").not(jQuery(this )).siblings(".ans").fadeOut(600);
        jQuery(this).siblings(".ans").fadeIn(600);
    });
});

JSFiddle

JQuery造成两次fadeIn？

3 个答案: