我有一个JavaScript hide/showdiv,其中有4个不同的div。它正在部分工作,但无法按照我想要的方式执行。当我单击一个Div时,它会打开隐藏的Div,这是完美的,但是当我单击另一个链接以打开另一个Div时,我希望另一个Div我先单击以关闭,然后将新的链接打开。这是我的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
});
这是一个改进的示例:
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>
请尝试此
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});
,如果您可以将DIV提供一个普通类而不是ID,这样您就可以使用此常见类隐藏其他Divs,例如:
$('.common_class').addClass('hide');
如果您不能循环遍历所有divs并在显示当前点击之前的一个:
:$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
希望这会有所帮助。
使用常见类:
$('.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>