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文件吗？我也可以为该文件编写它，但我认为你可以处理它。

＆＃13;

<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>

＆＃13;

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>

使用隐藏/显示隐藏其他Div

2 个答案: