Question

HelloOverflow上的所有人，在过去的几天里，我的网站出现了一些问题，并且对于它的位置非常舒服。我当前的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的白色， 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 hide和show，而不是使用切换。

Answer 2

您可以指定一个公共类，并在点击时强制它们全部关闭，然后重新打开您想要的那个......

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();
    });
});

然后将类添加到html ...

<div id="white" class="common">
</div>
<div id="v2black" class="common">
</div>
<div id="v3black" class="common">
</div>

Answer 3

将第一个更改为：

$("#firstpagename, #firstpagename2").click(function () {
    $("#white").show();
    $("#v2black, #v3white").hide();
});

然后重复其他人。

Answer 4

如果你给要切换类的元素（例如“toggleable”），它应该很容易工作：

$(".toggleable").click(function(){
      $(".toggleable").hide(); //Hide all elements with the class toggleable.
      $(this).toggle(); //Show the element that the user clicked on.
});

jQuery隐藏和显示Div

4 个答案: