Question

我正在开展一项活动onclick。我想在每个单元格中有很多onclick事件，我希望div的大小相等（无论数字），这意味着文本显示AND它不是全屏而是保持在边框的宽度内，最重要的是我想知道如何一次打开一个点击事件。例如，如果用户点击第一个，我不希望第二个打开。

    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }

#opener{    background-color: #07183d; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;}
#benefits{ background-color: #07183d; 
    border: none;
    color: white;
    padding: 15px 32px;    text-decoration: none;
    display: inline-block;
    font-size: 16px;}}
a{text-decoration:none;}
a:visited{text-decoration:none;color: white;}
#upbutton {border:1px dotted white;
}

 <div id="opener"><a href="#1" name="1" onclick=" show();">SOCIETES: 400</a></div> 
    <div id="benefits" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21% 
           <div id="upbutton"><a onclick=" hide();">fermer</a></div> 
    </div> 

 <div id="opener"><a href="#1" name="1" onclick=" show();">CONTACTS: 400</a></div> 
    <div id="benefits" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21% 
           <div id="upbutton"><a onclick=" hide();">fermer</a></div> 
    </div>

Answer 1

你想要这样显示吗？或者，一旦显示其中一个，你想隐藏另一个吗？以下代码的工作原理如下：

我们将id更改为类以应用相同的CSS样式，如下所示。
每个div标签都可以有一个单独的id，例如b1，b2等。为此，我们可以通过为b1传递参数'1'，为b2传递'2'来调用hide和show函数。依此类推。
当我们在javascript函数中获取id时，我们只是将传递的参数附加为'b'。示例：对于b1，当调用onclick时，javascript获取id（'b'+ 1），即b1，并单独应用css。同样的标准适用于show（）和hide（），它可以从下面的代码片段中看到。

希望，这有帮助。

function show(id) { 
        if(document.getElementById('b'+id).style.display=='none') { 
            document.getElementById('b'+id).style.display='block'; 
        } 
        return false;
    } 
    function hide(id) { 
        if(document.getElementById('b'+id).style.display=='block') { 
            document.getElementById('b'+id).style.display='none'; 
        } 
        return false;
    }

.opener {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.benefits {
  background-color: #07183d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width:300px;
}


}
a {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: white;
}
#upbutton {
  border: 1px dotted white;
}

<div class="opener"><a href="#1" name="1" onclick=" show('1');">SOCIETES: 400</a></div>
<div class="benefits" id="b1" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21%
  <div id="upbutton"><a onclick=" hide('1');">fermer</a></div>
</div>

<div class="opener"><a href="#1" name="1" onclick=" show('2');">CONTACTS: 400</a></div>
<div class="benefits" id="b2" style="display:none;">Part CAC 80 : 30 923<br/>Part Filiales +300M€: 3 600<br/>% contacts cs: 51%
  <div id="upbutton"><a onclick=" hide('2');">fermer</a></div>
</div>

隐藏并显示多个div并排排列的div

1 个答案: