jQuery 隐藏和显示 Div

Question

大家好 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。

Answer 1

您可以分配一个通用类并强制它们在单击时全部关闭，然后重新打开您想要的...

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>