大家好 StackOverflow 的所有人,在过去的几天里,我的网站遇到了一些问题,并且已经对它的位置感到非常满意。我当前的 jQuery 脚本是:
jQuery(document).ready(function() {
$("#firstpagename, #firstpagename2").click(function () {
$("div#white").toggle();
});
$("#secondpagename, #secondpagename2").click(function () {
$("div#v2black").toggle();
});
$("#thirdpagename, #thirdpagename2").click(function () {
$("div#v3black").toggle();
});
});
我知道这可能不是最干净和最好的方法,但它有效并且在过去 5 天里让我发疯,因为我现在才开始使用 jQuery 一周。
我现在要做的是使 div 的 white、v2black 和 v3black 打开;当它确实打开时,它会关闭可能同时打开的任何其他 div(见上文)。
这是我的 HTML,以备引用:
<div class="altstevenav" style="display:none">
<div class="stevenav">
<ul class="navigation">
<li>
<a href="#firstpagename" id="firstpagename">Steve A</a>
</li>
<li>
<a href="#secondpagename" id="secondpagename">Tattoos</a>
</li>
<li>
<a href="#thirdpagename" id="thirdpagename">Sketchbook</a>
</li>
</ul>
</div>
</div>
</div>
<!--MAIN CLOSING DIV-->
</div>
<!--CONTENT CLOSING DIV-->
<div class="stevenav">
<ul class="navigation">
<li>
<a href="#firstpagename" id="firstpagename2">Steve A</a>
</li>
<li>
<a href="#secondpagename" id="secondpagename2">Tattoos</a>
</li>
<li>
<a href="#thirdpagename" id="thirdpagename2">Sketchbook</a>
</li>
</ul>
</div>
<!--ALL DIVS ARE CLOSE HERE-->
<!--Divisional Panels-->
<div id="white">
<div style="width:968px; margin: 0 auto;">
<div class="panel" style="color:#000000;">
<div style="width:450px; float:left;">
<img src="<?php echo the_field('image_one_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_two_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_three_of_biography'); ?>" width="425" alt="Biography Image" />
</div>
<div style="width:450px; float:left; text-align:left;">
<?php echo the_field('biography_content'); ?>
</div>
</div>
</div>
</div>
<div id="v2black">
<div style="width:968px; height:1000px; margin: 0 auto;">
</div>
</div>
<div id="v3black">
<div style="width:968px; height:1000px; margin: 0 auto;">
</div>
</div>
我想这很简单,但我只是想知道我应该如何去做这件事..
我的问题简而言之: white,v2black< 一次只能打开一个 div/em> 和 v3black。
最佳答案
您可以分配一个通用类并强制它们在单击时全部关闭,然后重新打开您想要的...
jQuery(document).ready(function() {
$("#firstpagename, #firstpagename2").click(function () {
$('.common').hide();
$("div#white").toggle();
});
$("#secondpagename, #secondpagename2").click(function () {
$('.common').hide();
$("div#v2black").toggle();
});
$("#thirdpagename, #thirdpagename2").click(function () {
$('.common').hide();
$("div#v3black").toggle();
});
});
然后将class添加到html...
<div id="white" class="common">
</div>
<div id="v2black" class="common">
</div>
<div id="v3black" class="common">
</div>
关于jQuery 隐藏和显示 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9489999/