Jquery隐藏多个div onclick答案

【问题标题】：Jquery hide multiple divs onclickJquery隐藏多个div onclick
【发布时间】：2014-02-12 19:48:59
【问题描述】：

我正在制作一个健身应用程序，在每个锻炼页面上我都有一个显示“信息”、“数据输入”和“进度”的按钮。但是，当按钮被单击时，divs 层彼此重叠并同时显示时，这工作正常。

我想要的是主要显示的信息，但是当用户单击其他按钮时，其他按钮 div 被隐藏。因此一次只显示一个 div。

HTML

<div id="buttons">
    <a class="Smallbutton" id="showInfo">
        <img src="img/info.png" />
    </a>
    <a class="Smallbutton" id="showDataInput">
        <img src="img/add-item.png" />
    </a>
    <a class="Smallbutton" id="showHistory">
        <img src="img/bar-chart.png" />
    </a>
</div>
<div class="info" style="display: none;">
    <p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting
        yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput" style="display: none;">
    <form onsubmit="save_data()">
        Reps:
        <input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
        <input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
        <input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history" style="display: none;">
    <div id="log"></div>
    <!--clears all data in localstorage-->
    <input type="button" value="Clear" onclick="clearLocal();" />
</div>

脚本

//JQUERY SHOW/HIDE HISTORY

$(document).ready(function() {
    $('#showHistory').click(function() {
            $('.history').slideToggle("fast");
    });
});



//JQUERY SHOW/HIDE DATA INPUT

$(document).ready(function() {
    $('#showDataInput').click(function() {
            $('.dataInput').slideToggle("fast");

    });
});

//JQUERY SHOW/HIDE INFO

$(document).ready(function() {
    $('#showInfo').click(function() {
            $('.info').slideToggle("fast");

    });
});

这是我的 JSFiddle http://jsfiddle.net/GYru6/

提前谢谢你

我在http://jsfiddle.net/XwN2L/ 之后找到了这个示例，但是当我将代码实现到我的网站时，所有 div 都会立即显示。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

一些小的调整

为所有按钮添加data-target=""
在所有 div 中添加一个 target 类

试试

<div id="buttons">  
    <a class="Smallbutton" id="showInfo" data-target=".info"><img src="img/info.png"/></a>
    <a class="Smallbutton" id="showDataInput" data-target=".dataInput"><img src="img/add-item.png"/></a>
    <a class="Smallbutton" id="showHistory" data-target=".history"><img src="img/bar-chart.png"/></a>
</div>  

<div class="info target" style="display: none;">
    <p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput target" style="display: none;">
    <form onsubmit="save_data()">
        Reps: <input id="reps" type="number" name="quantity" min="1" max="12" step="1" required />
        Sets: <input id="sets" type="number" name="quantity" min="1" max="4" step="1" required />
        <input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();" />
    </form>
</div>
<div class="history target" style="display: none;">
    <div id="log"></div>
    <!--clears all data in localstorage-->
    <input type="button" value="Clear" onclick="clearLocal();"/>
</div>

然后

$(document).ready(function () {
    var $targets = $('.target');
    $('#buttons .Smallbutton').click(function () {
        var $target = $($(this).data('target')).slideToggle();
        $targets.not($target).hide()
    });
});

演示：Fiddle

【讨论】：

【解决方案2】：

尝试在点击功能上添加.hide()其他div

 $(document).ready(function() {
        $('#showHistory').click(function() {
            $('.history').slideToggle("fast");
            $('.dataInput').hide(); //hide other elements
            $('.info').hide();  //hide other elements
        });
    });

FIDDLE

【讨论】：

【解决方案3】：

试试这个方法，

HTML，

<div id="buttons">
    <a class="Smallbutton" id="showInfo">
        <img src="img/info.png" />
    </a>
    <a class="Smallbutton" id="showDataInput">
        <img src="img/add-item.png" />
    </a>
    <a class="Smallbutton" id="showHistory">
        <img src="img/bar-chart.png" />
    </a>
</div>
<div class="info infoContainers" style="display: none;">
    <p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting
        yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput infoContainers" style="display: none;">
    <form onsubmit="save_data()">
        Reps:
        <input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
        <input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
        <input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history infoContainers" style="display: none;">
    <div id="log"></div>
    <!--clears all data in localstorage-->
    <input type="button" value="Clear" onclick="clearLocal();" />
</div>

还有 Javascript，

//JQUERY SHOW/HIDE HISTORY
$(document).ready(function() {
    $('#showHistory').click(function() {
        $('.infoContainers').slideUp();
        $('.history').slideToggle("fast");
    });
});

//JQUERY SHOW/HIDE DATA INPUT
$(document).ready(function() {
    $('#showDataInput').click(function() {
        $('.infoContainers').slideUp();
        $('.dataInput').slideToggle("fast");

    });
});

//JQUERY SHOW/HIDE INFO
$(document).ready(function() {
    $('#showInfo').click(function() {
        $('.infoContainers').slideUp();
        $('.info').slideToggle("fast");

    });
});

DEMO

【讨论】：

【解决方案4】：

我会使用 hideAll 函数并在每个元素上调用它。这将简化一点逻辑。

function hideAll(){
    $('.info, .dataInput, .history').slideUp();
}

然后在每个点击事件中调用它

$('#showInfo').click(function() {
    hideAll();
    $('.info').slideToggle("fast");
});

http://jsfiddle.net/GYru6/1/

【讨论】：