[英]Javascript hide/show div
I have a javascript hide/show div with 4 different divs going. 我有一个JavaScript隐藏/显示div,其中包含4个不同的div。 It is working partially but not performing the way I would like.
它正在部分工作,但未达到我想要的方式。 When I click one of the divs it opens up the hidden div, which is perfect, but when I click the other link to open up the other div I want the other one I clicked first to close and then the new one to open.
当我单击一个div时,它会打开隐藏的div,这是完美的,但是当我单击另一个链接以打开另一个div时,我要先单击另一个,然后再打开一个新的div。 Here is my javascript.
这是我的JavaScript。
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggle('hide');
});
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
<hr class="dark2">
<p></p>Whats in the Bag <i class="fa fa-angle-down" style="font-size:24px"></i></p>
</div>
</div></a>
<div id='content2' style="display:none">
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<a href="#" class="customize"><span style="customize"> Customize It</span></a>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<a href="#" class="customize"><span style="customize"> Customize It</span></a>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<a href="#" class="customize"><span style="customize"> Customize It</span></a>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
</div>
// Hopefully you have some selector reference to target them all
var $all = $(".drops"); // Clearly I used .drops for example
$('[data-value]').on('click', function(event) {
var $target = $('#'+ this.dataset.value);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
Here's an improved example: 这是一个改进的示例:
var $all = $(".togglable"); $('[data-toggle]').on('click', function(event) { var $target = $(this.dataset.toggle); $all.not( $target ).hide(); // Hide all but target one $target.toggle(); // Toggle target one });
[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;} .hidden{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-toggle="#el1">TOGGLE1</a> <a data-toggle="#el2">TOGGLE2</a> <a data-toggle="#el3">TOGGLE3</a> <div id="el1" class="togglable hidden">ELEMENT1</div> <div id="el2" class="togglable hidden">ELEMENT2</div> <div id="el3" class="togglable hidden">ELEMENT3</div>
Please try this 请尝试这个
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});
It will be better if you could give your divs a common class instead of ids so you could hide other divs using this common class like : 如果可以给div一个通用类而不是id更好,那么您可以使用以下通用类来隐藏其他div:
$('.common_class').addClass('hide');
If you cant you could loop through all the divs and hide them before showing the current clicked one : 如果不能,则可以遍历所有div并隐藏它们,然后显示当前单击的div:
$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
Hope this helps. 希望这可以帮助。
Snippet using common classes : 使用通用类的代码段:
$('.common_class').on('click', function(event) { $('.common_class_2').not($('.common_class_2', this)).addClass('hide'); $('.common_class_2', this).toggleClass('hide'); });
.hide{ display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='common_class'>DIV 1 <p class='common_class_2'>Content 1</p> </div> <div class='common_class'>DIV 2 <p class='common_class_2 hide'>Content 2</p> </div> <div class='common_class'>DIV 3 <p class='common_class_2 hide'>Content 3</p> </div> <div class='common_class'>DIV 4 <p class='common_class_2 hide'>Content 4</p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.