Question

我正在制作健身应用程序，在每个练习页面上我都有一个显示“信息”，“数据输入”和“进度”的按钮。这样工作正常，但是当按钮单击顶部的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>

SCRIPT

//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都会立即显示出来。

Answer 1

一些小调整

向所有按钮添加data-target=""
将类target添加到所有div的

尝试

<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

Answer 2

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

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

FIDDLE

Answer 3

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

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

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

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

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

Answer 4

试试这种方式，

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

Jquery隐藏多个div onclick

4 个答案: