Question

我目前有四个div，每个div都链接到一个隐藏的div：

div1 - div1hidden div2 - div2hidden div3 - div3hidden div4 - div4hidden

当用户点击其中一个div时，隐藏的div会出现。当再次点击时，div消失。

我遇到的问题是，如果点击所有四个div，则会显示所有四个隐藏。我想做的只是一次只显示一个。

例如，如果显示“div1hidden”并且用户在隐藏div1hidden之前单击div2，则div1hidden将隐藏并显示div2hidden。

这是我到目前为止的代码：

function hide_menu(id){document.getElementById(id).style.display = "none";}
function show_menu(id){document.getElementById(id).style.display = "block";}

<div class="div1" onclick="if (document.getElementById('div1hidden').style.display=='none') show_menu('div1hidden'); else hide_menu('div1hidden');"></div>

<div class="div2" onclick="if (document.getElementById('div2hidden').style.display=='none') show_menu('div2hidden'); else hide_menu('div2hidden');"></div>

<div class="div3" onclick="if (document.getElementById('div3hidden').style.display=='none') show_menu('div3hidden'); else hide_menu('div3hidden');"></div>

<div class="div4" onclick="if (document.getElementById('div4hidden').style.display=='none') show_menu('div4hidden'); else hide_menu('div4hidden');"></div>

提前致谢

瑞克

Answer 1

尝试这样的事情：

添加功能：

function hide_all() {
    hide_menu('div1hidden');
    hide_menu('div2hidden');
    hide_menu('div3hidden');
    hide_menu('div4hidden');
}

现在在显示任何隐藏的div之前调用该函数：

<div class="div1" onclick="if (document.getElementById('div1hidden').style.display=='none') {hide_all(); show_menu('div1hidden'); } else { hide_menu('div1hidden'); }"></div>

Answer 2

我不确定在打开你需要的那个之前隐藏所有其他div有什么问题：

<div class="div1" onclick="if (document.getElementById('div1hidden').style.display=='none') { hide_menu('div2hidden'); hide_menu('div3hidden'); hide_menu('div4hidden'); show_menu('div1hidden');} else hide_menu('div1hidden');"></div>

<!-- and so on -->

我必须说这不是onclick中进行比较的最佳方法 - 而是建议将其放在函数中，如下所示：

<script type="text/javascript">
function flipDiv(id)
{
    var vis = document.getElementById('div' + id + 'hidden').style.display;
    if(vis == 'none')
    {
        document.getElementById('div1hidden').style.display = 'none';
        document.getElementById('div2hidden').style.display = 'none';
        document.getElementById('div3hidden').style.display = 'none';
        document.getElementById('div4hidden').style.display = 'none';
        document.getElementById('div' + id + 'hidden').style.display = 'block';
    }
    else
    {
        document.getElementById('div' + id + 'hidden').style.display = 'block';
    }
}
</script>

...

<div class="div1" onclick="flipDiv(1)">...</div>
...

Answer 3

最简单的方法是缓存当前的打开菜单。

<head>
<script type="text/javascript">
var current = null; //current is stored here
function hide_current(){
    if(current !=null){
        document.getElementById(current).style.display = "none";
    }
}
function show_menu(id){
    if(current == id){
       hide_current();  //current is already open, close it
       current = null;  //reset current
    } else {
       document.getElementById(id).style.display = "block";
       current = id;
    }
}
</script>
</head>
<body>
<div class="div1" onclick="hide_current();show_menu('div1hidden');"></div>
<div class="div2" onclick="hide_current();show_menu('div2hidden');"></div>
<div class="div3" onclick="hide_current();show_menu('div3hidden');"></div>
<div class="div4" onclick="hide_current();show_menu('div4hidden');"></div>
</body>

Answer 4

虽然其他建议的答案将达到您想要的效果，但它们都不是非常强大。这是基于您的示例代码不是非常健壮的事实。它依赖于内联javascript调用和硬编码到您的元素。

这样的东西很容易扩展，不易破损。请注意，为了适应旧版本的IE（attachEvent支持和getElementsByClassName支持），需要进行一些修改。但这些概念很重要。

基本上我们得到所有的父div。将事件附加到他们的点击。当它们被点击时，我们隐藏了应该隐藏的所有div并显示我们想要的那个div。

http://jsfiddle.net/mrtsherman/8sgC2/2/

var divs = document.getElementsByClassName('menu');

for (var index = 0; index < divs.length; index++) {
    divs[index].addEventListener('click', function() {
        var contentDiv = null;
        //hide all other divs
        for (var i = 0; i < divs.length; i++) {
            contentDiv = document.getElementById(divs[i].id + 'content');
            contentDiv.style.display = 'none';
        }
        //show current item
        contentDiv = document.getElementById(this.id + 'content');
        contentDiv.style.display = 'block';
    }, false)
}

<div class="menu" id="div1">one</div>
<div class="menu" id="div2">two</div>
<div class="menu" id="div3">three</div>
<div class="menu" id="div4">four</div>

<div class="content" id="div1content">one content</div>
<div class="content" id="div2content">two content</div>
<div class="content" id="div3content">three content</div>
<div class="content" id="div4content">four content</div>

请注意，像jQuery这样的库可以用更少的代码完成此操作，而不必考虑浏览器差异以及滑动或淡入等酷炫效果。

http://jsfiddle.net/mrtsherman/8sgC2/3/

//bind to click event on the div
$('.menu').click( function() {
    //get content div associated with the clicked div
    var contentDiv = $(this).attr('id') + 'content';

    //if no items are visible yet then show current
    if ($('.content').filter(':visible').length == 0) {
        $('#' + contentDiv).slideDown();  
        return;      
    }

    //hide visible divs and show new div
    $('.content').filter(':visible').slideUp('fast', function() {
        $('#' + contentDiv).slideDown();
    });
});

Answer 5

您可以创建Display Div＆amp;隐藏的div 同时在循环中创建click事件
这是您可以用来申请无限div的源代码

＆＃13;

var n = 10;
var did = 'divDisplay';
var hid = 'divHidden';
function divDisplayOnclick()
{
  for(var i=0; i<n; i++)
  {
    document.getElementById(did+i+hid).style.display = 'none';
  }
  document.getElementById(this.id+hid).style.display = 'block';
}
function createDivDisplay()
{
  
  for(var i=0; i<n;i++)
  {
    var divDisplay = document.createElement('div');
    divDisplay.id  = did+i;
    divDisplay.innerHTML = 'Click to display hidden div '+i;
    divDisplay.className = did;
    divDisplay.onclick = divDisplayOnclick;
    document.body.appendChild(divDisplay);
    
    var divHidden = document.createElement('div');
    divHidden.id  = did+i+hid;
    divHidden.innerHTML = 'This is hidden div '+i;
    divHidden.className = hid;
    document.body.appendChild(divHidden);
    
  }
}
createDivDisplay();

＆＃13;

.divDisplay
{
  border: 1px solid powderblue;
  margin-bottom: 5px;
  cursor: pointer; 
}

.divHidden
{
  border: 1px solid red;
  margin-left: 20px;
  margin-bottom: 10px;
  display: none;
}

＆＃13;

一次不要显示多个div Javascript

5 个答案: