Javascript 如果找到类，如何隐藏元素

我仍在试图弄清楚jquery，在我的尝试中，我不仅试图弄清楚如何使用各种东西，而且还试图弄清楚为什么，我没有测试过任何东西，所以甚至不确定它是否有效（如果我的代码很糟糕/垃圾，请提前道歉）；然而，使用jquery似乎有无数种方法可以处理所有事情，那么最好的方法是什么呢？如果没有列出，有什么更好的方法？为什么?

如果存在

.active

类，则此代码用于显示/隐藏元素

if($('.active').length > 0){
   $('.more').attr('hidden').animate({opacity: "1"}, 200);
   /* ...or should I use
     $('.more').prop('hidden');
   */
}

或者类似的东西

if($('.active').length > 0){
   $('.more).is(':hidden');
}
if($('.active').length === 0);
   $('.more').not(':hidden');
}

还是仅仅添加/删除类更合适

if($('.active').length > 0){
   $('.more).addClass('hidden').fadeOut('fast');
}
if($('.active').length === 0);
   $('.more').removeClass('hidden').fadeIn('fast');
}

还是应该像这样显示/隐藏项目

if($('.active').length > 0){
   $('.more).hide('fast');
}
if($('.active').length === 0);
   $('.more').show('fast');
}

假设HTML是这样的：

<p class="more">More something or another</p> <!-- hidden if .active exists -->
<ul>
    <li class="active"></li> <!-- active added dynamically if selected -->
    <li></li>
</ul>

---

切换类怎么样

$('.more').toggleClass('hidden', !!$('.active').length))

然后通过CSS过渡添加动画：

.more { -webkit-transition:opacity 500ms; opacity:1 }
.hidden { opacity:0 }

“做事”的方法有很多种，但最终还是要编写性能良好的、“可理解的”代码，并与浏览器支持保持一致等等。jQuery API确实有一些很棒的方法，这些方法在命名约定中也是不言自明的

---

使用类和CSS转换可以很好地将逻辑与表示分离，其他同事也可以很容易地连接到CSS中，而不必担心内联样式。

IMO最好的解决方案是使用类，因为每个浏览器都支持它们

.animate（）方法允许我们创建动画效果，如果希望平滑过渡，请使用它

使用

$（…）.hide（）

将立即隐藏匹配的元素，而不显示动画。这大致相当于调用.css（“display”、“none”），只是display属性的值保存在jQuery的数据缓存中，以便以后可以将display恢复为其初始值。如果某个元素的显示值为inline，并且隐藏后显示，则该元素将再次显示为inline

除了Internet Explorer的某些vs之外，所有主要浏览器都支持隐藏属性。“隐藏”属性不得用于隐藏可以在其他演示文稿中合法显示的内容。例如，在选项卡式对话框中使用hidden来隐藏面板是不正确的，因为选项卡式界面只是一种溢出的表示形式——也可以使用滚动条在一个大页面中显示所有表单控件。使用此属性仅从一个演示文稿中隐藏内容同样是不正确的-如果某个内容被标记为隐藏，则它将从所有演示文稿（例如，包括屏幕阅读器）中隐藏

属性与属性

属性和属性之间的差异在特定情况下可能很重要。在jQuery1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。从jQuery1.6开始，.prop（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性

---

例如，应检索selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected，并使用.prop（）方法进行设置。在jQuery1.6之前，可以使用.attr（）方法检索这些属性，但这不在attr的范围内。它们没有相应的属性，只是属性。

如果（$（'.active'）.length）{$（'.more'）.hide（）}您测试的类在哪里？父母、孩子、兄弟姐妹？什么是HTML？如果该类中有一个元素，那么另一个类的所有元素都应该隐藏/显示吗？不过，考虑到您提供的案例，我建议：

$（'.more'）.toggle（$（'.active'）.length>0）您的标记和其他业务逻辑通常将决定使用哪种“样式”或“模式”。。。灵活性太棒了，不是吗？“使用jquery，似乎有无数种方法可以处理一切”是的，使用jquery，几乎总是有不止一种方法可以剥猫皮。@DavidThomas元素
。more
是分开的。这样做的目的是在手风琴中添加更多的描述，说明如果没有选择什么，该怎么办。所以它不是手风琴的父母、孩子或兄弟姐妹，而是一个单独的描述区域。HTML就在这篇文章的底部。这肯定会简化事情，我喜欢用css进行转换的想法，因为我对它比较熟悉。我最近一直在搜索jQueryAPI站点，它包含了大量的信息。但和往常一样，在合作中有更多的知识来源，因此这篇文章。谢谢你的回答！要记住两件事：并非每个浏览器都支持转换；当一个元素被设置为不透明度：0时，它将阻止用户单击它下面的任何内容。@rafaelcastrocouto“优雅地”。我很困惑，你推荐类，但整个答案都是关于“隐藏属性”？嗯。。。我可以整天上课，但我觉得没必要。如果您想了解更多信息，可以从这里开始：
.more { -webkit-transition:opacity 500ms; opacity:1 }
.hidden { opacity:0 }