javascript - 在并排对齐的多个 div 中隐藏和显示 div

Question

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

    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 通过 ('b'+1) 获取 id(即 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>