使用 Hide/Show 隐藏其他 div

Question

我正在使用下面的 javascript 代码来隐藏和显示一些 div。当我点击一个图标时，它会展开一个 div。当我单击另一个图标时，它会展开另一个 div 但不会关闭原始 div。我希望它一次只能打开一个 div，并且当您单击另一个图标时打开的 div 会关闭。

<script type="text/javascript">
    function unhide(divID) {
      var item = document.getElementById(divID);
      if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
      }
    }
 </script>

 <script type="text/Javascript">
   function hideshow(id) {
     if (document.getElementById(id).style.display == ""){    
       document.getElementById(id).style.display = "none";
      } else {
        document.getElementById(id).style.display="";
      }                 
    }
 </script><!--javascript to hide and unhide a div-->

以下是我的一些 HTML：

   <div class="row" id="rowTitles">
            <div class="col-sm-3">
                <center>
                <div class="row">
                    <div class="col-sm-12">
                        <a href="javascript: hideshow('foryou')"><img src="images/icon_you.png" onmouseover="this.src='images/icon_you_hover.png'" onmouseout="this.src='images/icon_you.png'" class="img-responsive" border="0"></a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                <div class="row" style="margin-top:1%">
                    <div class="col-sm-12"> 
                       <a href="javascript: hideshow('foryou')">FOR YOU</a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                </center>
            </div><!--end col-sm-4-->
            <div class="col-sm-3">
                <center>
                <div class="row">
                    <div class="col-sm-12">
                        <a href="javascript: hideshow('forteam')"><img src="images/icon_team.png" onmouseover="this.src='images/icon_team_hover.png'" onmouseout="this.src='images/icon_team.png'" class="img-responsive" border="0"></a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                <div class="row" style="margin-top:1%">
                    <div class="col-sm-12">
                        <a href="javascript: hideshow('forteam')">FOR YOUR TEAM</a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                </center>
            </div><!--end col-sm-4-->
            <div class="col-sm-3">
                <center>
                <div class="row">
                    <div class="col-sm-12">
                        <a href="javascript: hideshow('forcustomers')"><img src="images/icon_community.png" onmouseover="this.src='images/icon_community_hover.png'" onmouseout="this.src='images/icon_community.png'" class="img-responsive" border="0"></a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                <div class="row" style="margin-top:1%">
                    <div class="col-sm-12">
                        <a href="javascript: hideshow('forcustomers')">FOR OUR CUSTOMERS</a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                </center>
            </div><!--end col-sm-4-->
            <div class="col-sm-3">
                <center>
                <div class="row">
                    <div class="col-sm-12">
                        <a href="javascript: hideshow('forcommunity')"><img src="images/icon_network.png" onmouseover="this.src='images/icon_network_hover.png'" onmouseout="this.src='images/icon_network.png'" class="img-responsive" border="0"></a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                <div class="row" style="margin-top:1%">
                    <div class="col-sm-12">
                        <a href="javascript: hideshow('forcommunity')">FOR OUR COMMUNITY</a>
                    </div><!--end col-sm-12-->
                </div><!--end row-->
                </center>
            </div><!--end col-sm-4-->
        </div><!--end row-->



<div class="descriptions">
    <div id="foryou" style="display:none;margin-top:2%">
        <div style="padding-top:3%">
        <b>For you!</b><br> DESCRIPTION
        </div>
    </div><!--end ForYou-->
    <div id="forteam" style="display:none;margin-top:2%">
        <div style="padding-top:3%">
        <b>For your team!</b><br> DESCRIPTION 
        </div>
    </div><!--end ForTeam-->
    <div id="forcustomers" style="display:none;margin-top:2%">
        <div style="padding-top:3%">
       <b>For our customers!</b><br> DESCRIPTION
    </div>
    </div><!--end ForCommunity2-->
    <div id="forcommunity" style="display:none;margin-top:2%">
        <div style="padding-top:3%">
       <b>For our community!</b><br> DESCRIPTION
    </div>
    </div><!--end ForCommunity-->

    </div><!--end descriptions-->

Answer 1

您可以使用这个 jQuery 脚本来隐藏您的 div。 :D 你真的需要你的 html 文件吗？我也可以为该文件编写它，但我认为你可以处理它。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("div").hide();
    });
    $("#show").click(function(){
        $("div").show();
    });
});
</script>
<style>
img{
width: 150px;
}
</style>
</head>
<body>
<div>
<img src=https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Answer 2

我最终弄明白了。我将我的 javascript 更改为以下内容并保持我的 HTML 不变。

<script type="text/javascript">
function hideshow(d)
{
var onediv = document.getElementById(d);
var divs=['foryou','forteam','forcustomers','forcommunity'];
for (var i=0;i<divs.length;i++)
  {
  if (onediv != document.getElementById(divs[i]))
    {
    document.getElementById(divs[i]).style.display='none';
    }
  }
onediv.style.display = 'block';
} 
</script>