Question

我正在开发一个应用程序，我需要显示div的一部分，而我将崩溃它，即我可能有关于该div的信息，但我无法在折叠时隐藏所有信息。就像我在这里发布一个小提琴

所以在这个例子中，当我在扩展后崩溃时，这些部分将会显示出来。

Name:Jeet Chatterjee Organization :MSH GROUP Location :Salt Lake Occupation :Software Engineer

仅此部分。

Answer 1

尝试更新fiddle：

HTML：

   <a href="#" class="clickme">Click Me</a>
     <div class="box">

   <p> Name:Jeet Chatterjee 
       Organization :MSH GROUP 
       Location :Salt Lake 
       Occupation :Software Engineer
    </p> 

    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>

脚本：

    // Hide all the elements in the DOM that have a class of "box"
    $('.box').find('p:last').hide();

    // Make sure all the elements with a class of "clickme" are visible and bound
    // with a click event to toggle the "box" state
    $('.clickme').each(function() {
        $(this).show(0).on('click', function(e) {
            // This is only needed if your using an anchor to target the "box" elements
            e.preventDefault();

            // Find the next "box" element in the DOM
            $(this).next('.box').find('p:last').slideToggle('fast');
        });
    });

Answer 2

您还可以使用类名来一键显示/隐藏所有额外信息，或使用ID显示/隐藏与特定锚点击相关的特定信息块。

例如，如果您希望用户单击将展开页面上所有框的一个链接，则在隐藏的部分上使用类名。或者，如果您希望每个隐藏部分都有一个需要点击的特定链接，您可以在每个隐藏部分上添加一个唯一ID，该ID与点击特定链接相关联。

如何使用jQuery隐藏和显示div的一部分

2 个答案: