使用javascript显示隐藏html div [英] show hide html div using javascript

问题描述

我想使用javascript自定义此show hide html div。

I want to customize this show hide html div using javascript.

HTML

<a href="#" class="clickme">Menu 1</a>
<div class="box">
   <span><span class="labelText"><span></span>Number 1</span></span>
    <input type="text" value="" maxlength="50"><br/>
    <span><span class="labelText"><span></span>Number 2</span></span>
    <input type="text" class="inputclmsize1"  value="" maxlength="50"  aria-invalid="false"><br>
    <a href="">Submit</a>                                                                                     
</div>

<a href="#" class="clickme">Menu 2</a>
<div class="box">
    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,
</div>

CSS代码

body {
font: 12px/16px sans-serif;
margin: 10px;
padding: 0;}

.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;}

.clickme:hover {
text-decoration: underline;}

.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;}

Javascript代码

Javascript code

$('.box').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').slideToggle('fast');
    });

}）;

当我点击Menu1一行时，它会出现两个带提交链接的文本列。
我想要，当我点击提交按钮，菜单1关闭和菜单2说明自动打开。我怎样才能做到这一点。请任何人都可以帮忙？ :(
fiddle链接在这里
http://jsfiddle.net/rn4qdyue/2/

When i click Menu1 line, it appear two text column with submit link. i want to , when i click submit button, the Menu 1 close and menu 2 description open automatically. how can i do this. please anyone can help? :( fiddle link is here http://jsfiddle.net/rn4qdyue/2/

推荐答案

您可以将点击事件添加到提交按钮，然后切换每个框。 b
$ b

You can add a click event to the submit button, then toggle each box.

$("#submit").click(function(e){
    e.preventDefault();
    $("#box1").slideToggle('fast');
    $("#box2").slideToggle('fast');
});

请注意，我在提交按钮中添加了ID，并且两个框均为 DIV s。

Note I added IDs to the submit button, and both box DIVs.

小提琴： http://jsfiddle.net/rn4qdyue/6/

这篇关于使用javascript显示隐藏html div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！