使用JavaScript显示/隐藏HTML div

Question

我想使用JavaScript自定义此显示/隐藏HTML div。

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 代码

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

});

的意思是一个 JavaScript 代码块的结束语句，可能在上下文中的前面有对应的代码。

当我点击菜单1时，会出现两个带有提交链接的文本列。 我想要的是，当我点击提交按钮时，菜单1自动关闭并打开菜单2的描述。我该怎么做呢？请问有人可以帮忙吗？:( 这里是 fiddle 链接：http://jsfiddle.net/rn4qdyue/2/

- shgan

Answer 1

你可以在提交按钮中添加一个点击事件，然后切换每个框。

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

请注意，我已经为提交按钮和两个

标签添加了ID。

演示: http://jsfiddle.net/rn4qdyue/6/

- Steve

Answer 2

您可以为提交按钮添加一个id。

<a id="submit" href="">Submit</a>  

在JavaScript中，可以这样做：

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

Fiddle.

- Zee

Answer 3

添加一个提交按钮的点击处理程序。

<a href="" id="submit">Submit</a>  

---

$('#submit').click(function(e){
    e.preventDefault();
    var $parent = $(this).closest('.box');

    $parent.slideToggle('fast');
    $parent.next('.clickme').click();
});

更新的Fiddle代码

- Shaunak D

Answer 4

请查看以下解决方案。

$('#submit').on('click', function(e) {
    e.preventDefault();
    var $el = $(this).parent('.box');

    $el.slideUp('fast');
    $el.next().next('.box').slideDown('fast')
});

更新的Fiddle代码示例

- ketan

---

这个解决方案值得一枚奖牌。如果在单击提交按钮时菜单2已经打开，则菜单将保持打开状态。 - andre_northwind