用html和javascript中的div切换内容

Question

看起来很简单，但是我无法将其包裹住。 我正在尝试切换内容，并在单击按钮div后显示它。 我尝试编写一个javascript函数来切换关闭和打开，但是无法获取它。 任何帮助表示赞赏。

            <div class="et_pb_module et_pb_toggle et_pb_toggle_close  et_pb_toggle_0 et_pb_toggle_item">
            <h5 class="et_pb_toggle_title">Content Button</h5>
            <div class="et_pb_toggle_content clearfix">
                <p> Content</p>

            </div> <!-- .et_pb_toggle_content -->
        </div> <!-- .et_pb_toggle -->

Answer 1

您可以使用toggle()函数，如下所示：

 $('.et_pb_toggle_title').on("click",function(){ $('.et_pb_toggle_content').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="et_pb_module et_pb_toggle et_pb_toggle_close et_pb_toggle_0 et_pb_toggle_item"> <h5 class="et_pb_toggle_title">Content Button</h5> <div style="display:none;" class="et_pb_toggle_content clearfix"> <p> Content</p> </div> </div> 

Answer 2

因此，您需要有一个click事件，可以是内联的（要单击的元素的标签内）

//Make a unhide function that sets the display to show, then call it using this
onclick="unhide();"

或者，在JS文件中，您可以具有如下事件监听器。

document.getElementById("clickButton").addEventListener("click",function() {
    //Give the hidden element display:none; in the CSS
    document.getElementById("clickButton").style.display = inline;
}

Answer 3

除了使用常规切换之外，还可以使用fadeToggle()使其淡入和淡出，或使用slideToggle()使其从顶部到顶部以动画形式显示/消失。

 $('.et_pb_toggle_title').on("click", function() { $('.et_pb_toggle_content').fadeToggle(); }); 

 .et_pb_toggle_content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="et_pb_module et_pb_toggle et_pb_toggle_close et_pb_toggle_0 et_pb_toggle_item"> <h5 class="et_pb_toggle_title">Content Button</h5> <div class="et_pb_toggle_content clearfix"> <p> Content</p> </div> </div>